Как определить, имеет ли элемент НЕТ data-attr

У меня здесь что-то вроде нишевого случая.

Итак, я создаю инструмент боковой панели, чтобы использовать его для быстрого создания заметок, и я столкнулся с проблемой, не установив сотни data-attrs.

В настоящее время у меня есть раскрывающееся меню, в котором отображается контент, содержащий конкретный data-attr в зависимости от выбора, а остальное скрывает. Проблема, с которой я столкнулся, заключается в том, что я также хочу, чтобы отображались все элементы, которые не содержат никаких data-attrs.

Есть ли простой способ проверить, нет ли для элемента HTML определенных data наборов?

HTML:

<select id="ouSelect">
  <option></option>
  <option data-ou="aiv">AIV ***</option>    
  <option data-ou="appstore">Appstore ***</option>
  <option data-ou="firetv">Fire TV ***</option>
  <option data-ou="kindle">Kindle ***</option>
</select>

<ul id="stuffs">
  <li data-kindle="true">Kindle</li>
  <li>Generic</li>
  <li data-aiv="true">AIV</li>
  <li>Generic</li>
  <li data-firetv="true">FireTV</li>
  <li>Generic</li>
  <li data-appstore="true">Appstore</li>
  <li>Generic</li>
</ul>

jQuery:

$(function(){
  var ou = "";
  $('#ouSelect').change(function() {
    ou = $('#ouSelect option:selected').data('ou');
    ouSelected(ou);
  });
  function ouSelected(which){
    $('li').each(function(){
      if($(this).data(which) === undefined){
        $(this).hide();
      } else {
        $(this).show();
      }
    })
  }
});

CodePen: http://codepen.io/anon/pen/GyqoK

Как видите, все общие наборы исчезают при выборе опции. В идеале я бы хотел, чтобы отображались элементы с data-kindle, а также элементы с без data-attr.

Есть идеи, как это сделать? Любая помощь приветствуется!


javascript html jquery custom-data-attribute
person Nicholas Hazel    schedule 24.07.2014    source источник
comment
вы нашли свой ответ здесь   -  person Claudio Santos    schedule 24.07.2014

Ответы (2)


arrow_upward
2
arrow_downward

Измените свой чек на это:

if($(this).data(which) === undefined && Object.keys($(this).data()).length > 0)
person juvian    schedule 24.07.2014
comment
^ Отлично :-) Спасибо! Всегда люблю быстрый ответ. - person Nicholas Hazel; 24.07.2014
comment
Джувиан - Я посмотрел на вас, и вы спамите отрицательными голосами. Я не приму ваш ответ, пока вы не исправите его, потому что все ответы технически работают. - person Nicholas Hazel; 24.07.2014
comment
@NicholasHazel: Как бы вы это определили? - person Ry-♦; 24.07.2014
comment
@NicholasHazel Сегодня он ни разу не голосовал против, его -2 репутации объясняются тем, что его ответ тоже получил отрицательное голосование. - person Karl-André Gagnon; 24.07.2014
comment
@NicholasHazel, как объяснил, не сделал сегодня ни одного отрицательного голоса, просто получил отрицательный голос за мой ответ, и это тоже дает -2 репутации - person juvian; 24.07.2014
comment
Не беспокойся. Спасибо за решение :-) - person Nicholas Hazel; 25.07.2014
comment
@NicholasHazel Почему вы думаете, что голосование против - это плохо? - person kapa; 25.07.2014
comment
Это не. Но спамить их есть. - person Nicholas Hazel; 25.07.2014

arrow_upward
0
arrow_downward

При поддержке свойства dataset это очень просто:

Object.keys(element.dataset).length === 0

Хотя это не совсем уместно. data-* атрибуты не должны мешать друг другу, и у них не должно быть динамических имен. Как насчет более простого определения категорий?

<li data-category="appstore">Appstore</li>

(Не поддерживается свойство dataset, вы можете использовать

function hasDataAttributes(element) {
    for (var i = 0; i < element.attributes.length; i++) {
        var name = element.attributes[i].name;

        if (name.substring(0, 5) === 'data-') {
            return true;
        }
    }

    return false;
}

.)

person Ry-♦    schedule 24.07.2014
comment
^ Совершенно разумно. Я все равно так и сделаю :-) Что касается вашей исходной строки, похоже, что она вытащила только один элемент li. - person Nicholas Hazel; 24.07.2014
comment
@NicholasHazel: Как вы это использовали? - person Ry-♦; 24.07.2014
comment
@ Николас Хейзел: Object.keys(this.dataset).length. Буквально «Объект». - person Ry-♦; 24.07.2014
comment
codepen.io/anon/pen/FCicn - все еще выглядит сломанным. Хотя у меня уже есть ответ :-) Большое спасибо за помощь. Кстати, ни один из этих отрицательных голосов не от меня. - person Nicholas Hazel; 24.07.2014
comment
@NicholasHazel: this, а не element. - person Ry-♦; 24.07.2014