0

我一直在尝试在 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;
    });
});

真的是这样，谢谢！

4

3 回答 3

4

在+元素的 ID 中包含该字符会导致 jQuery 变得混乱，因为该字符是为Next Adjacent Selector+保留的。

如果您从代码中删除这些字符，它就可以正常工作。正如对此答案的评论之一所述，由于 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

于 2013-02-16T19:22:02.033 回答
3

问题出+在选择器中。它需要被转义，因为它在 Selectors API 中具有特殊含义（并且对于 ID 无效）。

如果您++从href和 中删除了id，它可以工作。

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

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

题外话：你不需要两个.ready()调用，这就是你所拥有的，但使用不同的语法。

于 2013-02-16T19:21:17.430 回答
1

正如其他人所提到的，您的问题是+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;
    });
});
于 2013-02-16T19:30:27.880 回答