2015-06-15 2 views
0

Мне бы хотелось, чтобы пользователь нажал кнопку «2» (код ниже), на кнопке должен появиться атрибут данных clicked = true. в конце концов, мне бы хотелось, чтобы при нажатии пользователем кнопки «3» кнопку «2» clicked необходимо удалить, а атрибут данных 3 кнопки должен быть clicked = true. сейчас это выглядит как я не могу сделать простую вещь, как размещение данных на элементе и взаимодействовать с нимjquery .data() не привязывает данные к элементу

HTML:

<body> 
    <button class = "two">2</button> 
    <button class="three">3</button> 
</body> 

Сценарий:

$(document).ready(function(){ 
      //when user clicks on button the button should show signs of data attr 
      $('.two').on('click',function(e){ 
       $(this).data('clicked', true); 
       //alert('sup') 
      }) 
      if($('.two').data('clicked')){ 
       alert('received from data') 
      } 
    }); 

Я попытался следующие this chosen answer для переключения что data attr, чтобы я мог выяснить, какой элемент щелкнул, чтобы выполнить операции позже в моем коде

+3

'if' работает до' click' обработчика (* и никогда, так как он находится в '.ready' метод *) –

ответ

1

Я думаю, что вы пытаетесь сохранить нажмите кнопку для возврата позже.

В таком случае это будет лучше использовать решение на основе класса как

$(document).ready(function() { 
 
    //when user clicks on button the button should show signs of data attr 
 
    var $clicks = $('.clicks').on('click', function(e) { 
 
    $(this).addClass('clicked'); 
 
    $clicks.not(this).removeClass('clicked'); 
 
    }); 
 

 
    $('#test').click(function() { 
 
    alert($('.clicks.clicked').text()) 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="two clicks">2</button> 
 
<button class="three clicks">3</button> 
 
<br /> 
 
<button id="test">Test</button>


Если вы хотите продолжать петь data-clicked атрибут, вам нужно использовать .attr() не .data() как .data() не обновляет значение атрибута

$(document).ready(function() { 
 
    //when user clicks on button the button should show signs of data attr 
 
    var $clicks = $('.clicks').on('click', function(e) { 
 
    $(this).attr('data-clicked', 'true'); 
 
    $clicks.not(this).removeAttr('data-clicked'); 
 
    }); 
 

 
    $('#test').click(function() { 
 
    alert($('.clicks[data-clicked]').text()) 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="two clicks">2</button> 
 
<button class="three clicks">3</button> 
 
<br /> 
 
<button id="test">Test</button>

+0

http://jsfiddle.net/arunpjohny/cuova53m/1/ –

+0

привет это было полезно, но мне было интересно, если вы можете помочь мне с моей следующей проблемой. Я приму свой ответ. в http://jsfiddle.net/fvu3n5h5/ Я пытаюсь получить переменную суммы, которая будет обновляться нажатием кнопки. моя логика заключается в том, что если нажать кнопку «2», то «сумма» будет равна 2, и если будет нажата 3 кнопка «сумма будет три», как я могу получить сумму для обновления. спасибо .. так, когда я нажимаю на тест, он должен показывать значение для суммы –

+0

@ user2537537 http://jsfiddle.net/arunpjohny/gtqacbr9/1/ –

Смежные вопросы