0

私は、parent()/children()/find() とセレクター構文の太陽の下ですべての組み合わせを試してきました。仕事!どなたか見ていただけると本当にありがたいです..

ポートフォリオセクションに移動すると、ここでライブを見ることができます-> 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+用に予約されているためです。

これらの文字をコードから削除すると、問題なく動作します。この回答へのコメントの 1 つで述べたように、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, "\\+")

トピック外: 2 つの.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 に答える