Измените фоновое изображение на Div, на основе другого идентификатора DIV ⇐ CSS

[Anonymous]

Я борюсь с этой проблемой после многочисленных попыток заставить ее работать, так что теперь я выхожу вперед и обращаюсь к вам, ребята, о помощи.
Цель здесь состоит в том, чтобы сделать .nd-some-some-slide , чтобы изменить его фоновое изображение, нажав на некоторые из них. Слайд, но это просто #facebook идентификатор, и независимо от того, какая ссылка нажимается ниже слайда, это всегда #facebook ...
Без дальнейшего дела, вот что я достиг до сих пор:
html

Код: Выделить всё

 

 
 
 
 
 
 
 

< /code>

css: < /p>
#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(https://lh4.googleusercontent.com/0h_HL5zsCPJbMbdfWmirovt8g-T7w47RdZRTQz_6dRl4fvOc9sLzPqutklXaxCt6iz3jBCEQ1To=w2057-h1016) no-repeat; background-size: contain; }
#twitter { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#googleplus { background: url(https://lh3.googleusercontent.com/uU8qkOE9uE5BAME3f2wOxeein3ZjtQ1eFyYkPtF32NL9oHDAoEpQ0zCuG5Nu7jJWkmhvBPiQftE=w2057-h1016) no-repeat; background-size: contain; }
#youtube { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#pinterest { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#instagram { background: url(https://lh5.googleusercontent.com/zYUQ1YxUkBEFvbKpREmVngVFpSTX7SvexdmzD9IUMm2SUrEkdcAWLyEKGpzB7XshLK1YG8DCjFo=w2057-h1016) no-repeat; background-size: contain; }
#linkedin { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }

/* Slides */
#facebook-slide { background: url(https://lh4.googleusercontent.com/0h_HL5zsCPJbMbdfWmirovt8g-T7w47RdZRTQz_6dRl4fvOc9sLzPqutklXaxCt6iz3jBCEQ1To=w2057-h1016) no-repeat; background-size: contain; }
#twitter-slide { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#googleplus-slide { background: url(https://lh3.googleusercontent.com/uU8qkOE9uE5BAME3f2wOxeein3ZjtQ1eFyYkPtF32NL9oHDAoEpQ0zCuG5Nu7jJWkmhvBPiQftE=w2057-h1016) no-repeat; background-size: contain; }
#youtube-slide { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#pinterest-slide { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
#instagram-slide { background: url(https://lh5.googleusercontent.com/zYUQ1YxUkBEFvbKpREmVngVFpSTX7SvexdmzD9IUMm2SUrEkdcAWLyEKGpzB7XshLK1YG8DCjFo=w2057-h1016) no-repeat; background-size: contain; }
#linkedin-slide { background: url(https://i.sstatic.net/M6U3Oodp.png) no-repeat; background-size: contain; }
< /code>
js: < /p>
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 , спасибо за любую помощь и советы!

Подробнее здесь: https://stackoverflow.com/questions/257 ... er-divs-id