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>

Fire事件取决于数据属性上的单击事件

1 个答案: