Jquery toggle (), hide () не работает должным образом - PullRequest
Новая
       28

Jquery toggle (), hide () не работает должным образом

3 голосов
/ 14 декабря 2010

Я только начинаю с JQuery в среде Drupal.

У меня есть несколько миниатюр, и я хочу, чтобы при нажатии на одну из них в «окне просмотра» появлялась большая картинка (скрытый элемент div). Могли бы быть и более эффективные способы сделать то, что я делаю, но мне нужно сделать это следующим образом.

Вот что у меня есть: 

$(document).ready(function() {
  //$('#bigpic1').hide(); //show the first big picture always on page load
  $('#bigpic2').hide();
  $('#bigpic3').hide();

 $('a#thumb1').click(function() {
    $('#bigpic2').hide(); $('#bigpic3').hide();
    $('#bigpic3').toggle(200);
     return false;
  });
 $('a#thumb2').click(function() {
    $('#bigpic1').hide(); $('#bigpic3').hide();
    $('#bigpic2').toggle(200);
    return false;
  });
  $('a#thumb3').click(function() {
    $('#bigpic1').hide(); $('#bigpic2').hide();
    $('#bigpic3').toggle(200);
    return false;
  });

});

Помимо того, что это некрасивый код, он не работает правильно. Первое большое изображение не появляется, когда появляется страница, и нажатие на дополнительные миниатюры показывает правильный div - но никогда не скрывает ничего (только одна большая картинка должна быть видна одновременно в «области просмотра»).

Мой HTML выглядит так 

<table><tr>
  <td><a href="#" mce_href="#" id="thumb1">...thumb1...</td>
  <td><a href="#" mce_href="#" id="thumb2">...thumb2...</td>
  <td><a href="#" mce_href="#" id="thumb3">...thumb3...</td>
</tr>
<tr><td colspan="3">
  <!-- my "viewport" cell -->
  <!-- the big picture displays here -->
  <div  id="bigpic1">... </div>
  <div  id="bigpic2">...</div>
  <div  id="bigpic3">...</div>
</td></tr></table>

Ответы [ 2 ]

2 голосов
/ 14 декабря 2010

Во-первых, было бы удобно идентифицировать вашу "ячейку области просмотра" по ID или классу. Я не знаю, как настроена остальная часть вашего документа, но, например: 

<td id="viewport-cell" colspan="3">
  <div id="bigpic1">...1... </div>
   ...etc...
</td>

Аналогичным образом, возможно, вы можете добавить класс к ссылкам для миниатюр, чтобы упростить задачу: 

<a class="thumb" href="#" mce_href="#" name="thumb1" id="thumb1"></a>

Установите стиль по умолчанию для ваших "больших картинок", которые будут скрыты: 

td#viewport-cell div { /* hide all bigpics */
  display: none;
}
td#viewport-cell div#bigpic1 { /* but show the first one */
  display: block;
}

Наконец, с помощью jQuery: 

$(document).ready( function(){
  $('table#mytable').find('a.thumb').click( function(e){
    e.preventDefault(); // suppress native click
    var bigpicid = '#bigpic'+ this.id.replace(/^thumb/i,'');
    $(bigpicid).siblings().hide().end().fadeIn('slow');
  });
});

Вот пример: http://jsfiddle.net/redler/SDxwF/

2 голосов
/ 14 декабря 2010

Селектор # выбирает идентификатор, поэтому вам не нужен там тип.Селекторы - одна из лучших функций jQuery, так что ознакомьтесь со всеми ними.http://api.jquery.com/category/selectors/.

Вы можете даже сделать общий метод, подобный этому (вам нужно дать элементам имя). 

<table>
    <tr>
        <td>
            <a href="#" mce_href="#" name="thumb1" id="thumb1">...thumb1...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb2" id="thumb2">...thumb2...</a>
        </td>
        <td>
            <a href="#" mce_href="#" name="thumb3" id="thumb3">...thumb3...</a>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <!-- my "viewport" cell -->
            <!-- the big picture displays here -->
            <div name="bigpic1" id="bigpic1">...1... </div>
            <div name="bigpic2" id="bigpic2">...2... </div>
            <div name="bigpic3" id="bigpic3">...3... </div>
        </td>
    </tr>
</table>

И код jQuery.1009 *

Это меньше кода, он более расширяемый.Его не нужно будет менять, если вы добавляете / удаляете изображения.О первом изображении, отображаемом при загрузке, вы пытались $('#bigpic1').show(); при загрузке документа.Да, и вам не нужно возвращать значение в функциях.

...