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

Question

我想在单击时激发的元素中有[data targer="this.nextSibling"]来更改其值。

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

jsfiddle

<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中传递元素引用以使用元素属性。

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

如果您只想更新计数"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和previousElementSiblin来返回实际元素
• 数据属性中的javascript代码也不起作用。对于解释器来说，它只是文本(字符串(，而不是要执行的代码。您可以尝试将它与eval((一起使用，但这是一种糟糕的模式，应该避免
• 此外，函数中的"this"指向"window"元素，而不是正在单击的按钮。要获得引用，您需要将按钮作为函数参数onClick="makeMore(this)"传递

所以，它应该是这样的(类似于Nishu上面写的(：

HTML

<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>

JS-

function makeLess(target)   {
target.nextElementSibling.innerHTML--
}
function makeMore(target)   {
target.previousElementSibling.innerHTML++
}

Fiddle

还有一件事：混合HTML和JS通常是不好的，如果可能的话应该避免。最好通过document.getElementById或element.querySelector获取元素，然后使用element.addEventListener附加事件。