Вызов функции в классе с элементами, имеющими определенные данные- *

Question

Вызов функции в классе с элементами, имеющими определенные данные- *

0

Допустим, у меня есть следующий html:

<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="false" style="display: inline;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">

Если элементы скрыты, я сохраняю true в data-hidden поле, потому что мне нужно будет скрыть все элементы одновременно и, сохранив "состояние" в data-hidden поле, я уверен, что знаю, какие из них будут отображаться снова. То есть:

<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="false" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">

Я пытаюсь сделать это, используя jquery, set display: inline; только для элементов со data-hidden: 'false'?

Что у меня (что работает):

$(".expanded").each
    (function() {
        if($(this).attr('data-hidden')=='false'){
            $('.expanded').show();
        }
    });

И мой вопрос в том, есть ли лучший (более эффективный) способ, или это единственный способ сделать это?

sPaz 29 нояб. 2013, в 19:18

Источник

0

«Что у меня есть (что работает):« То, что у вас есть, покажет все элементы с expanded классом, если у любого из них есть data-hidden=false , что, скорее всего, не то, что вы хотите.
T.J. Crowder 29 нояб. 2013, в 17:33
1

Решение Аруна является правильным, но, как примечание, jQuery также имеет функцию данных, чтобы использовать data('hidden') вместо attr('data-hidden') .
Ingo Bürk 29 нояб. 2013, в 17:35
0

@ IngoBürk Спасибо! Не знал об этом. @TJ Crowder, ты уверен? Я использую его прямо сейчас, и он работает, только если элемент data-hidden=false .
sPaz 29 нояб. 2013, в 17:37
0

@sPaz: я уверен. Код $('.expanded').show(); , если выполнено, покажет все элементы, соответствующие .expanded . Примечание стороны: Если вы используете data функции (и нет никаких причин , чтобы здесь), убедитесь , что вы прочитали документацию к нему очень тщательно. У этого есть более одного действительно удивительного поведения.
T.J. Crowder 29 нояб. 2013, в 17:39
0

Да, то, что говорит @TJCrowder, правильно. Если какое data-hidden либо data-hidden равно false ваш код вызовет show() для всех элементов с классом .expanded , а не только для того, data-hidden установлено значение false .
Ingo Bürk 29 нояб. 2013, в 17:39
1

Вот скрипка, показывающая это: jsfiddle.net/R3u3A/1
Ingo Bürk 29 нояб. 2013, в 17:47
0

@TJCrowder Я не буду использовать функцию data здесь, но я буду иметь в виду, чтобы прочитать документацию. И после просмотра функции снова, да, я думаю, что она show() все элементы. Это должен был быть $($(this)).show(); ,
sPaz 29 нояб. 2013, в 17:48

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

2 ответа

1

Попробуй это,

$(".expanded").filter(function(){
   return $(this).data('hidden') == 'false';
}).show();

Rajaprabhu Aravindasamy 29 нояб. 2013, в 14:34

0

Нет необходимости изобретать это колесо, у нас уже есть отличное .
T.J. Crowder 29 нояб. 2013, в 17:34
0

@TJCrowder Я просто хотел показать другое решение. :)
Rajaprabhu Aravindasamy 29 нояб. 2013, в 17:38

Ещё вопросы

«Что у меня есть (что работает):« То, что у вас есть, покажет все элементы с expanded классом, если у любого из них есть data-hidden=false , что, скорее всего, не то, что вы хотите.
Решение Аруна является правильным, но, как примечание, jQuery также имеет функцию данных, чтобы использовать data('hidden') вместо attr('data-hidden') .
@ IngoBürk Спасибо! Не знал об этом. @TJ Crowder, ты уверен? Я использую его прямо сейчас, и он работает, только если элемент data-hidden=false .
@sPaz: я уверен. Код $('.expanded').show(); , если выполнено, покажет все элементы, соответствующие .expanded . Примечание стороны: Если вы используете data функции (и нет никаких причин , чтобы здесь), убедитесь , что вы прочитали документацию к нему очень тщательно. У этого есть более одного действительно удивительного поведения.
Да, то, что говорит @TJCrowder, правильно. Если какое data-hidden либо data-hidden равно false ваш код вызовет show() для всех элементов с классом .expanded , а не только для того, data-hidden установлено значение false .
Вот скрипка, показывающая это: jsfiddle.net/R3u3A/1
@TJCrowder Я не буду использовать функцию data здесь, но я буду иметь в виду, чтобы прочитать документацию. И после просмотра функции снова, да, я думаю, что она show() все элементы. Это должен был быть $($(this)).show(); ,
Нет необходимости изобретать это колесо, у нас уже есть отличное .
@TJCrowder Я просто хотел показать другое решение. :)

Arun P Johny · Accepted Answer · 2013-11-29T16-18-00.000Z

Вы можете просто использовать селектор атрибутов

$('.expanded[data-hidden="false"]').show()

Демо: скрипка

Кажется достаточно эффективным! Спасибо!