为什么我的文本不会在模态框上改变颜色？答案

【问题标题】：Why will my text not change color on modal box?为什么我的文本不会在模态框上改变颜色？
【发布时间】：2019-08-09 12:06:47
【问题描述】：

我创建了一行代码，用户将在其中单击文本，将颜色变为红色。这与每次文本为红色时都会检查的复选框功能相关联。顺便说一下，复选框是不可见的。但为了帮助我，我将不透明度提高到 100 而不是 0。

我不知道为什么当我将代码放在模态框的代码中时代码不起作用，而这正是我希望它首先出现的位置。

文本仅在您与复选框交互时更改颜色，但我也希望它在单击时更改颜色。

  $('a[href="#ex5"]').click(function(event) {
    event.preventDefault();
    $(this).modal({
      escapeClose: false,
      clickClose: false,
      showClose: false,
    });
  });

.onlyThese{
	cursor:pointer;
}

.checkbox input[type="checkbox"] {
    opacity: 100;
}

input[type=checkbox]:checked + label {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<div class="checkbox">
  <input type="checkbox" id="group1" class="sector-print-temp">
  <label for="group1" class="onlyThese">Publication </label>
</div>

<p> <a class="btn" href="#ex5">Sectors </a> </p>
					
<div id="ex5"  class="modal"  style="background-color:white">
  <div style="float:left;">
    <div class="checkbox">
      <input type="checkbox" id="group1" class="sector-print-temp">
      <label for="group1" class="onlyThese">Publication </label>
    </div>
  </div>
  <div>
      <p style="float:right"> 
      <a href="#" rel="modal:close"  class="onlyThese;"> <b>Apply</b> </a> 
      </p>    
  </div>
</div>

我对代码的期望应该如下：

用户点击文本
文字颜色变为红色
当文本变为红色时，复选框被选中

【问题讨论】：

FWIW - opacity 最多有一个！
我建议这是因为您有两个使用相同 ID 的复选框/标签。更改其中之一。
不要一次运行 3 个 jQuery 版本...一个就足够了。
我怎么知道哪个是正确的，但我运行的是否对我的代码有害？
只需阅读文档：jquery.com/download jQuery 最新版本实际上是 3.4.1 -- 就像任何产品一样，您必须注意到期日期

标签： javascript php jquery html css

【解决方案1】：

尝试做这么复杂的事情是没有用的，CSS允许直接解决这个问题，无论是否在模态窗口中

input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }

.onlyThese { cursor: pointer }

&lt;input type="checkbox" id="group1"&gt; &lt;label for="group1" class="onlyThese"&gt;Publication &lt;/label&gt;

【讨论】：