Question

我一直在尝试在parent（）/ children（）/ find（）和选择器语法的阳光下的每个组合.show（）我的网页元素，我隐藏在文档准备好了，但我不能让它工作！如果有人能看一眼，我真的很感激..

如果你去投资组合部分，你可以看到它在这里 - ＆gt; 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

在元素的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

Answer 2

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

如果您从++和href中删除了id，则可以使用。

或者，您可以执行.replace(/\+/g, "\\+")

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

偏离主题：您不需要进行两次.ready()次调用，而是使用不同的语法。

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;
    });
});

选择要显示和隐藏的元素，遍历问题！（jQuery的）

3 个答案:

选择要显示和隐藏的元素，遍历问题！ （jQuery的）

3 个答案:

选择要显示和隐藏的元素，遍历问题！（jQuery的）