javascript - 触发事件取决于数据属性上的点击事件

Question

我有 3 个具有相同数据属性的选项卡，但其值发生了变化。

<li>
    <a href="#tab1"
       data-set="set1">{{{text}}}</a>
</li>

<li>
    <a href="#tab2"
       data-set="set2">{{{text}}}</a>
</li>

<li>
    <a href="#tab3"
       data-set="set3">{{{text}}}</a>
</li>

根据您单击的元素中的哪一个，另一个元素必须更改其背景。

所以:

$('a[data-set="DYNAMIC SET"]').on('click', function(e) {        
    $('.eight-box').css({background: '/path/image'});        
});

我该怎么做才能使其动态化，而不仅仅是使用 if-else 或 switch-case？

可以说:set1 设置一个背景。 set2 设置另一个背景等等。因此图像的路径也会改变。

Answer 1

这会将事件附加到任何 <a>有一个 data-set属性;然后您可以使用 $(this).attr('data-set') 读取该属性根据其内容做任何您需要做的事情。

$('a[data-set]').on('click', function(e) {
  e.preventDefault(); // prevents the <a> from navigating
  var dataset = $(this).attr("data-set");
  console.log("You clicked on ",dataset);

  // do whatever you need based on that value, for example:
  $('.eight-box').css({background: '/path/'+dataset+'.jpg'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="{{href}}" data-set="set1">{{{text}}}</a></li>
<li><a href="{{href}}" data-set="set2">{{{text}}}</a></li>
<li><a href="{{href}}" data-set="set3">{{{text}}}</a></li>
<li><a href="{{href}}" data-set="set4">{{{text}}}</a></li>
<li><a href="{{href}}">(No dataset on this one)</a></li>