Question

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

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

我当前拥有它，所以当你点击一个链接时，它会向与该链接相关的图像添加一个类（<a>上的href =“＃one”然后id =“＃one”在<img>），但它目前没有通过每个<a>标记，只有一个。{而且它也没有删除我要求的课程。

代码如下：

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

鲍勃

Answer 2

这不起作用的原因：

if(this_attr == this_img)

是因为this_attr是一个网址，this_img是一个ID属性值。

jQuery新手，需要一点帮助

2 个答案: