javascript - jQuery 新手，需要一点帮助

Question

好的，我正在重新创建此功能:

http://www.w3.org/html/logo/#the-technology

我目前拥有它，因此当您单击链接时，它会向与该链接相关的图像添加一个类(<a> 上的 href="#one"，然后在<img> )，但目前并未遍历每个 <a>标签且只有一个。而且它也没有删除我请求的类(class)。

代码如下:

JS

$(document).ready(function() {

var container = '#portfolio #text_container';

var img_container = '#portfolio #image_container';

$(container).children('a').bind('click', function() {

var this_attr = $(this).attr('href');

var this_img = $(img_container).find('img').attr('id');

if(this_attr == this_img) {

    //$(img_container).find('img').hasClass('current').removeClass('current');

        // ^^^ This line isn't working, any ideas? :/

    $(img_container + ' img[id*="' + this_attr + '"]').addClass('current');

}

else {

    alert(this_img + ' this img');

        alert(this_attr + ' this attr');

}

  });

});

HTML如下

<div id="portfolio">

    <div id="image_container">
        <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="current" id="#one" />
        <img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" id="#two" />
    </div>

    <div id="text_container">
        <a href="#one" class="link">Item 1</a>
        <a href="#two" class="link">Item 2</a>

        <p id="#one" class="current">A bunch of text!</p>
        <p id="#two">The second bunch of text!</p>
    </div>

</div>

如果您需要更多信息，请告诉我:)

rcravens 使用以下代码修复了此问题..

JS

$(document).ready(function() {


    $('#text_container a').click(function(evt) {
        evt.preventDefault();

        $('.current').removeClass('current');

        var href = $(this).attr('href');

        $("." + href).addClass('current');


    });

还有 HTML..

<div id="portfolio">

    <div id="image_container">
        <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" class="one current" />
        <img src="http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif" alt="" class="two" />
    </div>

    <div id="text_container">
        <a href="one" class="link">Item 1</a>
        <a href="two" class="link">Item 2</a>

        <p class="one current">A bunch of text!</p>
        <p class="two">The second bunch of text!</p>
    </div>

</div>

Answer 1

我对您想要做的事情的解释如下:

http://jsfiddle.net/rcravens/wMhEC/

代码稍有改动。不应有多个具有相同 id 的元素。

鲍勃