Получить селектор элемента из метода элемента

Question

У меня есть [data-targer = "this.nextSibling"] в элементе, который я хотел запустить onClick, чтобы изменить его значение.

Возможно ли использовать селектор в [data-target]?

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

Ну, в вашем коде много неправильного.

• nextSibling и previousSibling не будут работать, поскольку этот метод возвращает также текстовые узлы. Вам нужно использовать nextElementSibling и previousElementSibling для возврата фактического элемента.
• код javascript в атрибутах данных также не будет работать. Для интерпретатора это просто текст (строка), а не код для выполнения. Вы можете попробовать использовать его с eval () , но это плохой шаблон, и его следует избегать.
• Кроме того, «this» внутри вашей функции указывает на элемент «окна», а не на кнопку, на которую нажимают. Для получения ссылки необходимо передать кнопку в качестве аргумента функции onClick="makeMore(this)"

Итак, это должно выглядеть так (похоже на то, что Нишу писал выше):

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.

Answer 2

Да, вы можете использовать селектор.В вашем коде есть опечатка data-targer,
, и, во-вторых, вам нужно передать ссылку на элемент в onClick, чтобы использовать атрибут элемента.

В любом случае, вам нужно использовать 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/