Простой jQuery показать / скрыть таблицу

Question

У меня есть эта простая функция JQuery, чтобы скрыть или показать таблицу. Показать / скрыть работает, но изображение (плюс / минус) не меняется.

Таблица выглядит так:

     <span id="collapsible">These are some
     new titles. 
    <table id="data">
    <tr>
    <th colspan="3">2008</th>
    </tr>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr><th colspan="3">2007</th><tr>
    <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    <td>1596</td>
  </tr>
  <tr>
    <td>Sunit Joshi</td>
    <td>History</td>
    <td>2010</td>
  </tr>
</table>

 </span>

Функция jQuery:

$(document).ready(function() {
    var collapseIcon = 'images/minus.png';

var collapseText = 'Collapse this section';

var expandIcon = 'images/plus.png';

var expandText = 'Expand this section';

var $subHead = $('#collapsible');
$subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" />')

$subHead.click(function(){
    $('#data').toggle();
    ($('#data').is(':hidden')) ? $(this).attr('src', expandIcon) : $(this).attr('src', collapseIcon);
    return false;
});

$subHead.css('cursor', 'pointer')
    .click();

});

Есть мысли, что здесь может быть не так. Изображение остается в исходном состоянии «+».

спасибо

Answer 1

Я исправил это, дав идентификатор тегу изображения. Вот обновление:

... предыдущий код

var $subHead = $('#collapsible');
$subHead.prepend('<img id="imgpointer" src="' + expandIcon + '" class="clickable" />')

$subHead.click(function(){
    $('table#data').toggle();
    ($('table#data').is(':hidden')) 
        ? $('img#imgpointer').attr('src', expandIcon) 
        : $('img#imgpointer').attr('src', collapseIcon);
    return false;
});

... остаток кода. Я проверю ошибки проверки HTML, как упоминал MitMaro.

спасибо Sunit

Answer 2

Ваш HTML содержит несколько ошибок проверки. Это может привести к поломке JavaScript или к неожиданным результатам. Запустите HTML через W3C Markup Validation Service и исправьте эти ошибки. Если это не поможет, отредактируйте ваш вопрос с верным HTML, и я помогу вам в дальнейшем.

---

ОП уже ответил на его вопрос, но так как у меня есть код здесь, я также опубликую свой.

Допустимый HTML:

<div id="collapsible">These are some new titles. 
   <table id="data">
      <tr>
         <th colspan="3">2008</th>
      </tr>
      <tr>
         <td>As You Like It</td>
         <td>Comedy</td>
         <td></td>
      </tr>
      <tr>
         <th colspan="3">2007</th>
         <td>Henry IV, Part I</td>
         <td>Hist=ry</td>
         <td>1596</td>
      </tr>
      <tr>
         <td>Sunit Joshi</td>
         <td>History</td>
         <td>2010</td>
      </tr>
   </table>
</div>

Исправлен Javascript:

<!--
$(document).ready(function() {
    var collapseIcon = 'images/minus.png';

    var collapseText = 'Collapse this section';

    var expandIcon = 'images/plus.png';

    var expandText = 'Expand this section';

    var $subHead = $('#collapsible');
    $subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" id="expandImage" />')

    $subHead.click(function(){
        $('#data').toggle();
        ($('#data').is(':hidden')) ? $("#expandImage").attr('src', expandIcon).attr('alt', expandText) : $("#expandImage").attr('src', collapseIcon).attr('alt', collapseText);
        console.log($(this).attr('src'));
        return false;
    });

    $subHead.css('cursor', 'pointer').click();

});
//-->

Я также добавил alt attr. к изображению, так как я предполагаю, что вы тоже этого хотели.

Answer 3

ОК, так что этот ответ не исправляет ошибку в вашем коде, но я хотел бы опубликовать немного более общее и, возможно, лучшее решение, учитывая, что оно использует некоторые из лучших практик.

Приведенный ниже пример работает с любым количеством уровней в иерархии, включая сложные сценарии, в которых вы хотите предоставить особый режим родителю только с одним ребенком. Он также использует Font Awesome, чтобы получить лучший глиф (особенно полезно, если вы используете Bootstrap). Кроме того, вместо использования jquery toggle на произвольном элементе, вы можете установить флажок для элемента, который имеет встроенное состояние переключения.

Итак, начнем с разметки вашего стола. Сначала вы должны поместить символы +/- в одну из ячеек таблицы следующим образом:

<tr><td>
    <input type="checkbox" id="parent1" class="txRowExpanderControl" checked>
    <label class="txRowExpanderControlLabel" for="parent1">
        <i class="rowsExpandIcon"></i>&nbsp;
    </label>{{title}}
</td></tr>

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

<tr data-expanderid="parent1">...</tr>
<tr data-expanderid="parent1">...</tr>

Затем ваши связанные классы CSS будут выглядеть следующим образом (обратите внимание, что я использую LESS, но если вы этого не сделаете, вы можете напрямую встроить классы fa * в свою разметку):

.txRowExpanderControl {
    display:none;   //don't show checkbox
}
.txRowExpanderControlLabel {
    cursor: pointer;    //cursor same as link
}

.rowsExpandIcon:extend(.fa all):extend(.fa-plus-square-o all) {
}
.rowsCollapseIcon:extend(.fa all):extend(.fa-minus-square-o all) {
}

.txRowVisible {
    display:table-row;
}
.txRowCollapsed {
    display:none;
}

Наконец, ваш JavaScript будет выглядеть следующим образом. Обратите внимание, что я использую делегированные события, которые лучше, чем прямое связывание, а также вместо переключения jQuery, я использую явное включение / выключение, чтобы все было легко отлаживаемым.

$("#myTable").delegate(".txRowExpanderControl", "click", function () {   
    var currentState = $(this).prop("checked");
    var expanderId = $(this).attr("id");
    var childRows = $(this).closest("tr").nextAll("tr[data-expanderid=\"" + expanderId + "\"]");
    var expanderIcon = $(this).next("label[for=\"" + expanderId + "\"]").children("i");

    if (currentState) {
        childRows.attr("class", "txRowCollapsed");
        expanderIcon.attr("class", "rowsExpandIcon");
    }
    else {
        childRows.attr("class", "txRowVisible");
        expanderIcon.attr("class", "rowsCollapseIcon");
    }
});