Question

是否可以使用Jquery在点击时切换数据属性（例如data-equalizer-watch）？

这是html：

<a class="accordion-expander" href="#" data-equalizer-watch>

所以onclick我希望它看起来像这样：

<a class="accordion-expander" href="#">

我知道这是错误的，但遵循以下原则：

$(".accordion-expander").click(function(e) {
  e.preventDefault();
  $(this).toggleData('equalizer-watch');
});

Answer 1

只需使用JQuery中的data-equalizer-watch方法将false的值设置为.data()即可

 $(this).data("equalizer-watch", false);

但是，如果要从显示中删除它，只需执行以下操作：

$(this).removeAttr("data-equalizer-watch");

如果使用.attr()方法更改值，则不会呈现data。必须使用data方法设置.data()属性才能重新呈现。 / p>

Answer 2

要执行此操作，您可以根据元素在单击时是否具有属性，在attr()和removeAttr()方法调用之间来回切换：

$(".accordion-expander").click(function(e) {
  e.preventDefault();
  var method = $(this).is('[data-equalizer-watch]') ? 'removeAttr' : 'attr';
  $(this)[method]('data-equalizer-watch', '');
});

a[data-equalizer-watch] {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="accordion-expander" href="#" data-equalizer-watch>
  foo
</a>

但是，不能保证此逻辑将按您的要求工作。这将取决于从属逻辑如何访问属性。

一个更好的解决方案是始终在元素上包含data属性，但将其值作为布尔标志进行切换，如下所示：

$(".accordion-expander").click(function(e) {
  e.preventDefault();
  var $el = $(this);
  $el.data('equalizer-watch', !$el.data('equalizer-watch'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="accordion-expander" href="#" data-equalizer-watch="true">
  foo
</a>

Answer 3

.toggleData()不是默认的jQuery方法，所以我们创建一个：

比起迷你插件，要使用jQuery的removeAttr()和attr()方法。

$.fn.toggleData = function(dname) {
  var d = `data-${dname}`;
  return this.is(`[${d}]`) ? this.removeAttr(d) : this.attr(d,'');
};


$(".accordion-expander").click(function(e) {
  e.preventDefault();
  $(this).toggleData('equalizer-watch');
});

[data-equalizer-watch] { color: fuchsia; }

<a class="accordion-expander" href="#" data-equalizer-watch>CLICK ME</a>
<a class="accordion-expander" href="#">CLICK ME</a>


<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Onclick切换数据属性

3 个答案: