Метод jQuery .data - Динамическое добавление или удаление элементов на основе данных хранилища. - PullRequest
Новая
       65

Метод jQuery .data - Динамическое добавление или удаление элементов на основе данных хранилища.

0 голосов
/ 25 июля 2011

Я создал страницу поиска с использованием параметрической фильтрации, проводимой при изменении значений флажков.

http://jsfiddle.net/s9FjY/4/

    $('#parameters input[type="checkbox"]:enabled').bind('change', function(e) {
      var $this = $(this),
        $checkedBoxes = $('#parameters').find('input:checkbox').filter(':checked').length,
        index = $('#parameters input:checkbox').index($this),
        txt = jQuery.trim($this.parent().text());
      if ($checkedBoxes === 0) {
        //remove all filters
        $('#filters > ul > li').remove();
      } else {
        if ($this.is(':checked')) {
          // add filter text
          var filterLink = $('<li>' + txt + '<span>Remove filter</span></li>');
          $.data(filterLink, 'myIndex', index);
          alert($.data(filterLink, 'myIndex'));
          $('#filters > ul').append(filterLink);
        } else {
          // remove filter text
          $('#filters > ul').find('li[class=' + index + ']').remove();
        }
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<ul id="parameters">
  <li>
    <label for="premium">
      <input type="checkbox" id="premium" name="filters" value="true" />Premium
    </label>
  </li>
  <li>
    <label for="articles">
      <input type="checkbox" id="articles" name="articles" value="true" />Articles
    </label>
  </li>
  <li>
    <label for="news">
      <input type="checkbox" id="news" name="news" value="true" />News
    </label>
  </li>
  <li>
    <label for="other">
      <input type="checkbox" id="other" name="other" value="true" />Other
    </label>
  </li>
</ul>

<div id="filters">
  <p>Filters applied:</p>
  <ul>
    <!-- Filters applied insert here -->
  </ul>
</div>

Я показываю, какой фильтр был применен в динамическом списке, и сохраняю связь в элементе фильтра списка с jQuery's .data () method.

Теперь, когда я сниму галочку с соответствующего флажка, я хочу удалить элемент фильтра li на основе данных, которые хранятся в указанном элементе.Ранее я делал это с атрибутом класса, но подумал, что использование .data () было более точным решением.

Не можете понять, как удалить соответствующий элемент списка?

Ответы [ 2 ]

2 голосов
/ 25 июля 2011

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

li[data-myIndex=...]

вместо 

li[class=...]

См. Мою обновленную скрипту: http://jsfiddle.net/sgGY3/

1 голос
/ 25 июля 2011

  1. Почему вы используете class? Вы никогда не определяли имена классов.

  2. Существует $(this).data, который работает без проблем: http://jsfiddle.net/s9FjY/7/.

  3. Вам не нужен отдельный код для 0 отмеченных флажков.

код: 

$('#parameters input[type="checkbox"]:enabled').bind('change', function(e){
    var $this = $(this),
        $checkedBoxes = $('#parameters').find('input:checkbox').filter(':checked').length,
        index = $('#parameters input:checkbox').index($this),
        txt = jQuery.trim($this.parent().text());
    if ($this.is(':checked')) {
        // add filter text
        var filterLink = $('<li>' + txt + '<span>Remove filter</span></li>');
        $(filterLink).data('myIndex', index);
        alert($(filterLink).data('myIndex'));                
        $('#filters > ul').append(filterLink);
    } else {
        // remove filter text
        $('#filters > ul').find('li').filter(function() {
            return $.data(this, 'myIndex') === index;
        }).remove();
    }  
});
...