Jquery toggle（），hide（）不按預期工作

Question

我剛剛在Drupal環境中使用JQuery。

我有一些縮略圖，我希望它可以讓你單擊一個時，更大的圖片出現在「視口」（一個隱藏的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> 

Answer 1

的＃選擇器選擇一個ID，這樣你就不需要在那裏的類型。選擇器是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代碼。

//on load 
$(document).ready(function() { 
    $('#bigpic2').hide(); 
    $('#bigpic3').hide(); 

    //this will be run when an element has a name with the text "thumb" in it 
    $('[name*=thumb]').click(function() { 
     //hide all big pictures (loops over every element that has a name with the text "bigpic" in it 
     $('[name*=bigpic]').each(function(index, value) { 
      if ($(this).is(':visible')) { //if the big pic is visible 
       $(this).hide(200); //then hide it 
       return false; //found the visible big pic so no need to keep looping 
      } 
     }); 
     //show the right image 
     $('#bigpic' + $(this).attr('id').replace('thumb', '')).show(200); 
    }); 
});// end on load 

這是更少的代碼，這是更具擴展性。如果添加/刪除圖像，則不需要更改。 關於您在加載時顯示的第一張圖像，您是否在文檔加載時嘗試$('#bigpic1').show();。哦，你不需要在函數中返回一個值。

Answer 2

首先，通過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> 

設置默認的風格爲您 「bigpics」 被隱藏：

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/