選擇要顯示和隱藏的元素，遍歷問題！ （jQuery）

Question

我一直在嘗試parent（）/ children（）/ find（）和選擇器語法的太陽下的每個組合.show（）我隱藏在文檔準備好的網頁元素，但我只能不要讓它工作！我會很感激，如果有人可以看看..

如果你去投資組合部分，你可以看到它住在這裏 - >http://holly.im/。

在任何情況下，HTML看起來是這樣的：

<div id="portfolio"> 
<h1>Heading</h1> 
<div class ="little_column"> 
    <div class="project"> 
    <a href="#c++_games_engine_construction" class="projlink"> click </a> 
    </div>  
</div> 
<div id="c++_games_engine_construction" class="big_column"> 
    <?php include "projects/C++_game_engine_construction.php"; ?> 
</div> 
</div> 

以及相關的jQuery：

$(document).ready(function() { 
    //hide all the big_columns/
    // project details within the portfolio page 
    $('#portfolio').find('.big_column').hide(); //This seems to be working 
}); 
$(function(){ 
    $('.project').click(function() { 
     var selectedProject = 
      $(this).children('a.projlink').attr('href'); 
     $(this).parent().parent().find(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show. 
     return false; 
    }); 
}); 

這是真的，謝謝！

Answer 1

問題在於選擇器中的+。它需要被轉義，因爲它在選擇器API 中有特殊含義（並且對於ID無效）。

如果您移除了href和id的++，它的工作原理。

---

或者，你可以做.replace(/\+/g, "\\+")

var selectedProject = $(this).children('a.projlink').attr('href').replace(/\+/g, "\\+") 

---

題外話：你並不需要兩個.ready()通話，這是你所擁有的，但使用不同的語法。

Answer 2

具有一個元素的ID的字符+導致因爲+字符被保留用於Next Adjacent Selector jQuery來變得混亂。

如果您從代碼中刪除這些字符，它就可以正常工作。正如在這個答案的評論之一中提到的，由於href基本上是要顯示的項目的ID，所以您可以直接選擇它。

HTML

<div id="portfolio" class="section"> 

    <h1>Heading</h1> 

    <div class="little_column"> 
     <div class="project"> <a href="#c_games_engine_construction" class="projlink"> click </a> 

     </div> 
    </div> 
    <div id="c_games_engine_construction" class="big_column"> 
     I'm hidden at first! 
    </div> 
</div> 

JS

$(document).ready(function() { 
    //hide all the big_columns/
    // project details within the portfolio page 
    $('#portfolio').find('.big_column').hide(); //This seems to be working 
}); 
$(function() { 
    $('.project').click(function() { 
     var selectedProject = $(this).children('a.projlink').attr('href'); 
     $(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show. 
     return false; 
    }); 
}); 

jsfiddle

Answer 3

正如其他人所說，你的問題是+字符的jQuery虐待。所以簡單的解決方案是：不要使用jQuery - 或者至少不選擇選擇器。由於您擁有的每個目標都是一個ID選擇器，因此我們可以輕鬆將其更改爲

$(document).ready(function() { 
    $('#portfolio').find('.big_column').hide(); 

    $('.project').click(function() { 
     var selectedProject = $(this).find('a').attr('href'); // a littebit simplified 

     var el = document.getElementById(selectedProject.slice(1)); 
     $(el).show(); 
     return false; 
    }); 
});