область для события / параметров jquery onclick с общим событием onclick

Question

Как мне записать дополнительные детали в тег div / span с помощью общего события onclick?

То есть

<span id=item1>Value #001<span id=clickableitem>xxx</span></span>
<span id=item2>Value #002<span id=clickableitem>xxx</span></span>
<span id=item3>Value #003<span id=clickableitem>xxx</span></span>

А затем:

$(document).on('click','#clickableitem',function(e){
e.preventDefault();

// how do I get the "value #001, #002, #003" value just 'outside'
// of the span tag?

Я пытался выяснить это с помощью .parent (). Html (), но, похоже, это не сработало ...

Спасибо!

Answer 1

HTML:

<span id=item1>Value #001<span class="clickableitem">xxx</span></span>
<span id=item2>Value #002<span class="clickableitem">xxx</span></span>
<span id=item3>Value #003<span class="clickableitem">xxx</span></span>

JS:

$('.clickableitem').click(function() {
    let text = $(this).parent().text().substring(0, $(this).parent().text().indexOf($(this).text()));

    console.log(text);
});

Answer 2

Замена текста небезопасна, может привести к пустому тексту, если значение совпадает с дочерним диапазоном xxxx ....

Этот подход более эффективен

HTML

<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>

JS

$(document).on('click','.spanClickable',function(e){
   alert( $(this).parent().contents().get(0).nodeValue  );
});

Answer 3

Свойство id всегда должно быть уникальным, вместо этого присвойте своему span общий класс className и подключите к нему обратный вызов обработчика событий. Кроме того, в вашем HTML необходимо заключать одинарные или двойные кавычки вокруг значений свойств, таких как id икласс:

HTML:

<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>

JQuery:

$(document).on('click','.spanClickable',function(e){
   e.preventDefault();
   //Using .text() on the parent produces the child span text as well
   //Replace the child text and the word Value since all you want is 
   //ex. #001
   const childSpanText = $(this).text();
   alert($(this).parent().text().replace(childSpanText, "").replace('Value ', ''));
});

Рабочая скрипка (https://jsfiddle.net/a5Lkon4j/2/)