Выбор нескольких элементов в шаблоне jquery

#jquery #jquery-templates

#jquery #jquery-шаблоны

Вопрос:

Я пытаюсь изменить класс одного или нескольких элементов в шаблоне при нажатии кнопки. Все образцы, которые у меня есть, обычно содержат один элемент с .tmplItem , и я не совсем понимаю, как добиться того, что я пытаюсь сделать. Это более или менее доказательство концепции.

у меня есть структура, подобная приведенной ниже.

 var messages = [
{ Body: "Testing 1", Read: "0" },
{ Body: "Testing 2", Read: "1" },
{ Body: "Testing 3", Read: "0" },
{ Body: "Testing 4", Read: "1" }
];

мой шаблон:

     <script id="messageTemplate" type="text/html">
        {{if Read == "1"}}
        <tr class="hdnMessage">
            <td class="hdnMessage" >
<input type="checkbox" id="cbHasReadMessage" checked="checked">
</td>
        {{else}}
        <tr class="showMessage">
            <td><input type="checkbox" id="cbHasReadMessage"></td>
        {{/if}}        
        <td>${Body}</td>
        </tr>
</script>

css — это:

 <style type="text/css">
.hdnMessage 
{
    display:none;
}
.showMessage
{
    display:block;
}
</style>

У меня есть кнопка вне шаблона

 <input type="button" value="Show Read Messages" id="btnShowHideReadMessages" />

для чего я добавил событие щелчка:

 $("#btnShowHideReadMessages").click(function() {    
if (showingReadMessages) {
      showingReadMessages = false;
      $(this).val("Show Read Messages");
//try to find checked checkboxes and set the class of the tr which is its parent
}    
else {
      showingReadMessages = true;
      ///Try finding all the current hidden TRs
      var hdnMessages = $("tr.hdnMessage").tmplItem();
      var hdnMsg = hdnMessages.data;
      var hdnElement = hdnMessages.nodes;
      $(hdnElement).replaceWith($('.showMessage'));
      }    
});

Последний сегмент сценария является неполным, поскольку я не мог понять, как заставить это работать. Любая помощь будет оценена.

1. Вы устанавливаете каждый флажок как id="cbHasReadMessage" , что недопустимо. Измените идентификатор на класс.

2. Спасибо, что указали на это. Я так привык позволять .net называть мои флажки на уровне строк, что забыл.

Ответ №1:

Полностью удалите class="showMessage" шаблон, затем измените нижнюю часть кода на что-то вроде этого:

 $("#btnShowHideReadMessages").click(function() {  
     $("tr.hdnMessage").toggleClass('hdnMessage');
});

1. Похоже, не работает. Я получаю сообщение об ошибке, что объект не поддерживает этот метод. Поскольку tr находится в шаблоне, вы могли бы ссылаться на tr таким образом? Я также заметил, что я устанавливаю td для скрытия. Я собираюсь проверить, может ли это быть проблемой.

2. Это сработало. синтаксис: $(«tr.hdnMessage»).toggleClass(‘hdnMessage’);

3. Если кого-то интересовал механизм отображения и скрытия, я сделал следующее: $(«#btnShowHideReadMessages»).click(function() { if (showingReadMessages) {showingReadMessages = false; $(this).attr(‘значение’, ‘Показывать прочитанные сообщения’); $(«input.cbMessage:проверено»).parent().parent().toggleClass(‘hdnMessage’); } else { showingReadMessages = true; $(this).attr(‘значение’, ‘Скрыть прочитанные сообщения’); $(«tr.hdnMessage»).toggleClass(‘hdnMessage’); } });