Как реализовывать действие из-за признака восходит в jquery?

У меня есть следующий код:

<span class="ejemple" data-id="10">Ejemplo 1</span>
<span class="ejemple" data-id="20">Ejemplo 2</span>
<span class="ejemple" data-id="30">Ejemplo 3</span>

В этом случае я хотел бы сделать что-то как это:

$("ejemplo[data-id='10']").click(function(e) {
   /* Aquí va el código a ejecutar*/
});

Точка состоит в том, чтобы выбирать span посредством класса, у которого есть признак, датирует со стоимостью 10.

2
задан 23.06.2016, 07:32
4 ответа

Другие ответы функционируют, но не лучший способ приступать к признакам восходи в jQuery, он более легкий еще:

Существуй метод датирует (), что манипулирует прямо attributos, которые инициализируются с data-, с этим методом ты можешь получать стоимость элемента DOM как так распределять их.

$(".ejemple").click(function(e) {

    /* lo que quieras hacer con $(this).data("id") */
    console.log($(this).data("id"));

});
3
ответ дан 24.11.2019, 14:05

Вероятно, что ты нуждаешься в том, чтобы сыграть с признаками data-, здесь у тебя есть пример cГіmo podrГ, - чтобы быть:

    $(".ejemple").click(function(e) {
        var myID = $(this).attr("data-id");
        console.log(myID);
        if(myID === "10")
        {
            console.log('has presionado el id 10');
            /* Aquí va el código a ejecutar*/          
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ejemple" data-id="10">Ejemplo 1</span>
<span class="ejemple" data-id="20">Ejemplo 2</span>
<span class="ejemple" data-id="30">Ejemplo 3</span>
2
ответ дан 24.11.2019, 14:05

ВїQuГ© есть дьявола в, как это у тебя есть?

[].forEach.call(document.querySelectorAll('[data-id]'), function(e) {
	e.onclick = function() {
    const id = Number(this.dataset.id);
    let rgb = null;
    // hacer algo con el id
    switch(id) {
    	case 10: rgb = '#3498db'; break;
      case 20: rgb = "#e74c3c"; break;
      case 30: rgb = "#1abc9c"; break;
    }
    document.body.style.backgroundColor = rgb;
  };
});
body {
  background-color: #555;
  padding: 1rem;
  text-align: center;
}
h1 {
  font-family: 'segoe ui';
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.88);
}
[data-id] {
  background-color: #fff;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'segoe ui';
  padding: .1rem .45rem;
}
[data-id]:first-of-type {
  background-color: #3498db;
}
[data-id]:nth-of-type(2) {
  background-color: #e74c3c;
}
[data-id]:last-of-type {
  background-color: #1abc9c;
}
<h1>Elije un color</h1>
<span data-id="10">R</span>
<span data-id="20">G</span>
<span data-id="30">B</span>
1
ответ дан 24.11.2019, 14:05

Ты был в порядке, только ты должен менять query выбор, из-за него следующий: $("span[data-id='10']"), посмотри здесь я оставляю тебе snippet.

$("span[data-id='10']").click(function(e) {
   console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ejemple" data-id="10">Ejemplo 1</span>
<span class="ejemple" data-id="20">Ejemplo 2</span>
<span class="ejemple" data-id="30">Ejemplo 3</span>


Обновление из-за альтернативы

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

$("span.ejemple").click(function(e){
    console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ejemple" data-id="10">Ejemplo 1</span>
<span class="ejemple" data-id="20">Ejemplo 2</span>
<span class="ejemple" data-id="30">Ejemplo 3</span>
0
ответ дан 24.11.2019, 14:05

Теги

Похожие вопросы