javascript - 如何在单击相应图像时在文本上添加一个类，并在单击另一个图像时将其删除，并对其他图像文本执行相同操作

Question

我有六个垂直点作为图像，我正在给它相应的文本单击图像时，其各自的文本会更改其属性。

我尝试点击图片并选择其各自的文本 ID，但它应该是动态工作的

 $(".parallx-dot-1").on('click',function(){
  $("#123").css("color","white"); 

我希望当 parallx-dot-1 被点击时，其各自的图标文本将其 css 属性更改为 color:#ffffff

当前代码

$(".parallx-dot-1").on('click',function(){
  $("#123").css("color","white");
//$("$icon-text").css("color","white"); <-- (Class replaced with id)

.icon-text {
  position: relative;
  right: 40px;
  color: #5D5D5D;
  font: 16px 'HelveticaNeue regular';
  float: left;
  width: 50%;
}

<ul class="paralx-position">
  <li class="parallx-dot-1"><span class="icon-text" id="123">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1" id="img1" tabindex="0"/><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"/></span>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"/>
  </li>
</ul>

Answer 1

您可以在 css 中将 text-color 从紫色更改为白色，希望对您有所帮助

$('.parallx-dot-1').click(function(e){
$(this).find('span').addClass('text-color')
})

.icon-text{
position:relative;
right:40px;
color:#5D5D5D;
font:16px 'HelveticaNeue regular';
float: left;
width: 50%;
}

.text-color
{
color:purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="paralx-position">
  <li class="parallx-dot-1"><span class="icon-text" id="123">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1" id="img1" tabindex="0"/><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"/></span>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"/>
  </li>
  <li class="parallx-dot-1"><span class="icon-text">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"/>
  </li>
</ul>