Question

我要触发onClick更改其值的元素中有[data-targer =“ this.nextSibling”]。

是否可以在[数据目标]中使用选择器？

<div class="container">
  <div class="row">
      <button class="col btn btn-danger" onClick="makeLess()" data-targer="this.nextSibling">
            <i class="fa fa-minus"></i>
            </button>
    <div class="col text-right">
      0
    </div>
      <button class="col btn btn-primary" onClick="makeMore()" data-target="this.previousSibling">
            <i class="fa fa-plus"></i>
            </button>
  </div>  
</div>

Answer 1

是的，您可以使用选择器。您的代码data-targer中有一个错字，
其次，您需要在onClick中传递元素引用以使用element属性。

无论如何，您需要使用previousElementSibling和nextElementSibling来访问同一树级别的元素。

如果您只想更新计数“ 0”而不对元素属性进行任何操作，则不需要传递元素引用。

您可以使用以下内容。

<div class="container">
  <div class="row">
      <button class="col btn btn-danger" onClick="makeLess(this)" data-target="this.nextElementSibling">
            <i class="fa fa-minus"></i>
            </button>
    <div class="col text-right">
     0
    </div>
      <button class="col btn btn-primary" onClick="makeMore(this)" data-target="this.previousElementSibling">
            <i class="fa fa-plus"></i>
            </button>
  </div>  
</div>
 <script>

 function makeLess(e)   {
  var target = e.nextElementSibling;
  target.innerHTML--;
}

function makeMore(e)    {
  var target = e.previousElementSibling;
  target.innerHTML++;
}
 </script>

这是jsFiddle：https://jsfiddle.net/sf5c3kgy/5/

Answer 2

好吧，您的代码中有很多错误。

nextSibling和previousSibling将不起作用，因为该方法还会返回文本节点。您需要使用nextElementSibling和previousElementSibling来返回实际元素。
javascript代码也将不起作用。对于解释器，它只是文本（字符串），而不是要执行的代码。您可以尝试将其与eval()一起使用，但这是错误的模式，应避免使用。
此外，函数内部的“ this”指向“ window”元素，而不是被单击的按钮。要获取参考，您需要将按钮作为函数参数min-width: 0

所以，它应该看起来像这样（类似于Nishu上面写的）：

HTML

onClick="makeMore(this)"

JS

<div class="container">
    <div class="row">
        <button class="col btn btn-danger" onClick="makeLess(this)">
            <i class="fa fa-minus"></i>
        </button>
        <div class="col text-right">
           0
        </div>
        <button class="col btn btn-primary" onClick="makeMore(this)">
            <i class="fa fa-plus"></i>
        </button>
    </div>  
</div>

Fiddle

另一件事：混合HTML和JS通常是不好的，应尽可能避免。最好通过function makeLess(target) { target.nextElementSibling.innerHTML-- } function makeMore(target) { target.previousElementSibling.innerHTML++ }或document.getElementById获取元素，然后使用element.querySelector附加事件。

从元素方法获取元素的选择器

2 个答案: