javascript - 根据另一个 div 的 ID 更改 div 上的背景图像

Question

经过无数次尝试后，我一直在努力解决这个问题，所以现在我挺身而出，向你们寻求帮助。

这里的目标是通过按下下面的一些 .nd-some-btn 链接，使 .nd-some-slide 改变它的背景图像。

我已经到了改变幻灯片背景图像的地步，但它似乎只是 #facebook id，无论在幻灯片下方按下什么链接，它始终是#facebook...

事不宜迟，这是我到目前为止所取得的成就:

HTML

<div id="nd-some">
<div class="nd-some-slide">&nbsp;</div>
<div class="nd-some-btn-pad">
    <div class="nd-some-btn" id="facebook">&nbsp;</div>
    <div class="nd-some-btn" id="twitter">&nbsp;</div>
    <div class="nd-some-btn" id="googleplus">&nbsp;</div>
    <div class="nd-some-btn" id="youtube">&nbsp;</div>
    <div class="nd-some-btn" id="pinterest">&nbsp;</div>
    <div class="nd-some-btn" id="instagram">&nbsp;</div>
    <div class="nd-some-btn" id="linkedin">&nbsp;</div>
</div>

CSS:

#nd-some {
    height: auto;
    width: 350px;
    padding: 5px;
    background: #777;
}

.nd-some-slide {
    width: 100%;
    min-height: 90px;
    background: #000;
}

.nd-some-btn-pad {
    width: 100%;
    margin: 0px auto;
    text-align: center;
    border-top: 2px solid white;
}

.nd-some-btn {
    display: inline-block;
    min-height: 32px;
    min-width: 32px;
    margin: 5px;
}

.selected {
    background: #fff;
}

/* Buttons */
#facebook { background: url(http://goo.gl/rBQCg0) no-repeat; background-size: contain; }
#twitter { background: url(http://goo.gl/xmgsU9) no-repeat; background-size: contain; }
#googleplus { background: url(http://goo.gl/EGHtFf) no-repeat; background-size: contain; }
#youtube { background: url(http://goo.gl/zkM82I) no-repeat; background-size: contain; }
#pinterest { background: url(http://goo.gl/Z2Gl3A) no-repeat; background-size: contain; }
#instagram { background: url(http://goo.gl/aFqJC4) no-repeat; background-size: contain; }
#linkedin { background: url(http://goo.gl/vTet0u) no-repeat; background-size: contain; }

/* Slides */
#facebook-slide { background: url(http://goo.gl/rBQCg0) no-repeat; background-size: contain; }
#twitter-slide { background: url(http://goo.gl/xmgsU9) no-repeat; background-size: contain; }
#googleplus-slide { background: url(http://goo.gl/EGHtFf) no-repeat; background-size: contain; }
#youtube-slide { background: url(http://goo.gl/zkM82I) no-repeat; background-size: contain; }
#pinterest-slide { background: url(http://goo.gl/Z2Gl3A) no-repeat; background-size: contain; }
#instagram-slide { background: url(http://goo.gl/aFqJC4) no-repeat; background-size: contain; }
#linkedin-slide { background: url(http://goo.gl/vTet0u) no-repeat; background-size: contain; }

JS:

var network = $('.nd-some-btn').attr('id');
var slidebg = $('.nd-some-slide');

$(".nd-some-btn").click(function() {
    $(".nd-some-btn").removeClass("selected");
    $(this).addClass("selected");

        $(slidebg).attr('id', network+'-slide');

});

这是我的 JSFiddle ，感谢您的帮助和建议!

Answer 1

在您的 javascript 中非常简单的修复。

您需要被单击按钮的 id。您只需要像这样重构您的代码:

var $slidebg = $('.nd-some-slide');
var $buttons = $('.nd-some-btn');

$buttons.click(function() {
  var $this = $(this);
  var network = $this.attr('id');

  $buttons.removeClass('selected');
  $this.addClass('selected');

  $slidebg.attr('id', network + '-slide');
});

通过在点击监听器之前指定 var network = $('.nd-some-btn').attr('id');，您可以有效地获取 id .nd-some-btn 列表中的第一个元素，在这种特殊情况下，它是 facebook。