Question

经过多次努力才能解决这个问题，所以我现在向前迈进，向你们寻求帮助。

此处的目标是通过按下面的某些.nd-some-slide链接，让.nd-some-btn更改其背景图片。

我已经到了改变幻灯片背景图片的地步，但它似乎只是#facebook id，无论在幻灯片下方按下什么链接，它都是＆＃39 ; s始终是#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。

Answer 2

每次点击都需要从id attr获取网络.nd-some-btn

$(".nd-some-btn").click(function() {
     var network = $(this).attr('id');

Answer 3

这是您的解决方案。

只需在js

中使用以下脚本即可

var slidebg = $('.nd-some-slide');
$(".nd-some-btn").click(function() {
  $(".nd-some-btn").removeClass("selected");
  $(this).addClass("selected");
  var network = $(this).attr('id');    
    $(slidebg).attr('id', network+'-slide');
});

希望这会有所帮助。：）

Answer 4

设置包含应用程序启动时的id的变量，而不是在函数调用中调用它。因此，只需将其移动到您的功能中即可。

$(".nd-some-btn").click(function() {
    $(".nd-some-btn").removeClass("selected");
    $(this).addClass("selected");
    var network = $(this).attr('id');
    $(slidebg).attr('id', network+'-slide');

});

Answer 5

attr ()方法的工作原理如下：获取匹配元素集中第一个元素的属性值，或者为每个匹配元素设置一个或多个属性。

所以关注你的代码 - var network = $('.nd-some-btn').attr('id')将返回第一个匹配元素的id属性，即#facebook

如果您的目标是获取所点击元素的ID，那么您可以在点击处理程序中执行此操作

var network = $(this).attr('id')。

Answer 6

我在你的css中删除了额外的id并在你的jQuery中使用以下内容。这将从单击的按钮获取bacground图像并将其应用于目标div。

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).css("background-image", $(this).css("background-image"))

});

您可能还想添加以下css，为目标div提供一些基本的背景属性：

.nd-some-slide {
    background-repeat:no-repeat;
    background-size: contain;   
}

这有额外的好处，因为你没有重复的样式或代码。

有关详细信息，请参阅jQuery .css()

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

6 个答案: