时间戳

首页 > 解决方案 > 单击问题上/后的 CSS 按钮样式

html - 单击问题上/后的 CSS 按钮样式

问题描述

处理 CSS 按钮问题的初级开发人员。这是一项调查，当您单击比例尺中的按钮输入答案时，按钮的颜色应该会改变、保持不变并保持不变，直到您转到下一页并继续（本质上是重置）。每页有三个问题要在继续之前回答。

期望的操作/问题：
 当您在量表上单击问题一的答案时（使用一系列 7 个按钮来指示您的答案），它应该会更改您选择的按钮的颜色。当您单击问题二的答案时，它应该将那个按钮的颜色更改为那个颜色，并且问题 ONE 应该保持它的颜色。目前，它没有 - 单击问题二会从问题一中删除颜色。

我经历了几个选项，例如 :focus、:visited 和 :active，但找不到答案。:focus 看起来它改变了点击的颜色，但是一旦我点击它之后的另一个问题，它就不会保留它。附件是一个截图，所以你可以看到我在说什么的更好的例子（问题二有一个选定的彩色按钮，现在问题一是空的）

屏幕截图示例 - 问题 2 按钮现在已着色，问题 1 已删除颜色 - 当我单击问题 2 按钮时，如何使其停止掉色？

总结：它会在点击时正确改变颜色，但一旦我点击它之后的问题，它就不会保持这种颜色。完全透明，这些是单选按钮，由我之前的开发人员制作，但我的任务是将它们更改为“常规”按钮 - 这是问题的一部分吗？任何建议将不胜感激！提前致谢！

这是它来自的代码：

return (
    <div className={styles.leftSection}>
      <div className={styles.center}>
        <h1 className={styles.pageTitle}>{parse(title)}</h1>
        <ProgressBar
          done={meterProgress}
          completedHeight={10}
          backgroundColor={'#DD0D0D'}
          backgroundHeight={2}
        />
        {items.map((step, i) => {
          if (index === i || index === i + 1 || index === i - 1) {
            return (
              <>
                <button
                  className={styles.continueButton}
                  id="editButton"
                  onClick={handleEdit}
                >
                  Edit Answer
                </button>
                <div className={styles.step} id={`${i}`}>
                  <h2 className={styles.question}>{step.question}</h2>
                  <form className={styles.form}>
                    <div className={styles.surveyBar}>
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '7' : '1'}
                        className={styles.oneButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '6' : '2'}
                        className={styles.twoButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '5' : '3'}
                        className={styles.threeButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value="4"
                        className={styles.fourButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '3' : '5'}
                        className={styles.fiveButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '2' : '6'}
                        className={styles.sixButton}
                        onChange={handleChange}
                      />
                      <input
                        type="button"
                        name={`${i}`}
                        value={step.reverseValue === true ? '1' : '7'}
                        className={styles.sevenButton}
                        onChange={handleChange}
                      />
                    </div>
                    <div className={styles.opinion}>
                      <div className={styles.disagree}>Strongly Disagree</div>
                      <div className={styles.neutral}>Neutral</div>
                      <div className={styles.agree}>Strongly Agree</div>
                    </div>
                  </form>
                </div>
              </>
            );
          }
        })}
      </div>

      {error == true ? (
        <div className={styles.errorMessage}>
          {' '}
          Almost there, {user?.firstName}! Please fill out all of the questions
          to continue  <br />
          <div className={styles.proTip}>
            Pro tip: Click on the “Reload Questions” button.
          </div>{' '}
        </div>
      ) : null}

      {showProgressIndicators && (
        <div className={styles.buttons}>
          <button className={styles.continueButton} onClick={handleBlur}>
            Reload Questions
          </button>
          <button className={styles.continueButton} onClick={next}>
            <p>
              {index === items.length - 2
                ? 'Complete' || 'Continue '
                : 'Continue '}
            </p>
          </button>
        </div>
      )}
    </div>
  );
// Button Number 1
input[type='button'].oneButton:focus {
  position: relative;
  background-color: #6C1111;
  color: #6C1111;
}

input[type='button'].oneButton:checked:focus {
  position: relative;
  background-color: #6C1111;
  color: #6C1111;
}

.oneButton {
  transform: scale(3);
  height: 20px;
  width: 20px;
  margin: 18px;
  border-radius: 50%;
  border: 1px solid #6C1111;
  background-color: white;
  color: white;
}

// // Button Number 2
input[type='button'].twoButton:focus {
  position: relative;
  background-color: #A73E12;
  color: #A73E12;
}

input[type='button'].twoButton:checked:focus {
  position: relative;
  background-color: #A73E12;
  color: #A73E12;
}

.twoButton {
  transform: scale(2.5);
  height: 20px;
  width: 20px;
  margin: 18px;
  border-radius: 50%;
  border: 1px solid #A73E12;
  background-color: white;
  color: white;
}

// // Button Number 3
input[type='button'].threeButton:focus {
  position: relative;
  background-color: #E36B14;
  color: #E36B14;
}

input[type='button'].threeButton:checked:focus {
  position: relative;
  background-color: #E36B14;
  color: #E36B14;
}

.threeButton {
  transform: scale(2);
  margin: 18px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #E36B14;
  background-color: white;
  color: white;
}

// // Button Number 4
input[type='button'].fourButton:focus {
  position: relative;
  background-color: #EAB902;
  color: #EAB902;
}

input[type='button'].fourButton:checked:focus {
  position: relative;
  background-color: #EAB902;
  color: #EAB902;
}

.fourButton {
  transform: scale(1.5);
  margin: 18px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #EAB902;
  background-color: white;
  color: white;
}

// // Button Number 5
input[type='button'].fiveButton:focus {
  position: relative;
  background-color: #C16911;
  color: #C16911;
}

input[type='button'].fiveButton:checked:focus {
  position: relative;
  background-color: #C16911;
  color: #C16911;
}

.fiveButton {
  transform: scale(2);
  height: 20px;
  width: 20px;
  margin: 18px;
  border-radius: 50%;
  border: 1px solid #C16911;
  background-color: white;
  color: white;
}

// // Button Number 6
input[type='button'].sixButton:focus {
  position: relative;
  background-color: #CF3B0F;
  color: #CF3B0F;
}

input[type='button'].sixButton:checked:focus {
  position: relative;
  background-color: #CF3B0F;
  color: #CF3B0F;
}

.sixButton {
  transform: scale(2.5);
  height: 20px;
  width: 20px;
  margin: 18px;
  border-radius: 50%;
  background-color: white;
  color: white;
  border: 1px solid #CF3B0F;
}

// // Button Number 7
input[type='button'].sevenButton:focus {
  position: relative;
  background-color: #DD0D0D;
  color: #DD0D0D;
}

input[type='button'].sevenButton:checked:focus {
  position: relative;
  background-color: #DD0D0D;
  color: #DD0D0D;
}

.sevenButton {
  transform: scale(3);
  height: 20px;
  width: 20px;
  margin: 18px;
  border-radius: 50%;
  border: 1px solid #DD0D0D;
  background-color: white;
  color: white;
}

标签： htmlcssbuttonstyling

解决方案

好吧，我会用（非常简单）Jquery来做到这一点。只需单击您想要的样式添加一个类。像这样：

$('.input').click(function () {
        $(this).siblings().removeClass('animation');
    $(this).addClass('animation');
});
input {width:100px;}
.animation {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
</div>
<br>
<div>
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
  <input class="input" type="buttom" value="buttom">
</div>
<br>

我添加了这一行$(this).siblings().removeClass('animation');，所以如果你从同一个块中选择一个答案，它不会同时设置两个样式。

推荐阅读