Question

所有尝试和阅读都没有运气。有两种类型的卡片元素，其中有两种不同的组，共有15种颜色选择。除了使用“ a”之外，我还能做什么？请帮忙!!!!!!!!!!!!!!

$(document).ready(function(){
   $("a").on('click mouseover', function () {
     var color = $(this).attr('class');
     $('#card_color_choice').removeClass().addClass("regcard cardlist "+color+"");
   });
});

$(document).ready(function(){
   $("a").on('click mouseover', function () {
     var color = $(this).attr('class');
     $('#card_color_choice2').removeClass().addClass("regcard cardlist "+color+"");
   });
});

.regcard{
  width: 100px;
  height: 100px;
}

.orange{
  background-color: #FF6600;
  color: #EFEFEF;
}


.blue{
  background-color: #637eb6;
  color: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Color Choices:<br/>
<a href="#" id="colorchoice" class="orange" >Color1</a>

<br/><br/>
<a href="#" target="_blank">
    <div id="card_color_choice" class="regcard cardlist orange" >
        Element 1 inside
    </div>
</a>
<br/><br/>
Different Elements:<br/>
<a href="#" id="colorchoice" class="blue">Color3</a>
<a href="#" target="_blank">
    <div id="card_color_choice2" class="regcard cardlist orange" >
        Element 2 inside
    </div>
</a>

Answer 1

将触发器和目标归为同一祖先。然后进行一些相对的DOM遍历以找到正确的目标。例如：

$(document).ready(function() {
  $(".trigger").on('click mouseover', function() {
    var color = $(this).attr('class').replace('trigger', '');
    $(this).closest('.group').find('.regcard').removeClass().addClass("regcard cardlist " + color + "");
  });
});

.regcard {
  width: 100px;
  height: 50px;
}

.orange {
  background-color: #FF6600;
  color: #EFEFEF;
}

.blue {
  background-color: #637eb6;
  color: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="group">
  Color Choices:<br/>
  <a href="#" class="trigger orange">Color1</a>
  <a href="#" target="_blank">
    <div class="regcard cardlist">
      Element 1 inside
    </div>
  </a>
</div>
<br/>
<div class="group">
  Different Elements:<br/>
  <a href="#" class="trigger blue">Color3</a>
  <a href="#" target="_blank">
    <div class="regcard cardlist">
      Element 2 inside
    </div>
  </a>
</div>

在同一页面上多次单击

1 个答案: