jquery - 使用 jquery 显示/隐藏元素

Question

我正在尝试使用菜单显示和隐藏图像。我怎样才能使它在开始时不显示任何内容，然后在点击时显示？

小提琴：http: //jsfiddle.net/J3kjD/1/

我有这个 HTML：

<div id="media" class="col-5">
    <img class="something" src="http://lorempixel.com/400/200/">
    <img class="somethingelse" src="http://lorempixel.com/400/200/">
</div>

<button data-id="something" class="test">Click!</button>
<button data-id="somethingelse" class="test">Click!</button>

CSS：

#media > img {
    display: none;
}

查询：

$(document).on('click', '.test', function (e) {
    category = $(this).data('id');
    $('#media > img').css('display', 'none');
    $('#media > .' + category).css('display', 'block');
});

Answer 1

也许尝试使用 data-id 属性：

data-id="something"

另外，请确保在小提琴中包含 jQuery。

http://jsfiddle.net/BFjRd/

Answer 2

不要使用class属性。约定说我们可以按照我们想要的任何顺序添加更多的 CSS 类，如果我们假设目标图像 ID 的值中有一个特定位置，这将是一个问题。

您可以改为将图像 ID 分配给图像的属性，例如按钮data-image的属性。请参阅小提琴。data-image-target

对于您的 HTML，您可以拥有：

<div id="media">
  <img data-image="something" src="http://lorempixel.com/400/200/" />
  <img data-image="somethingelse" src="http://lorempixel.com/400/100/" />
</div>

<button class="test" data-image-target="something">Click!</button>
<button class="test" data-image-target="somethingelse">Click!</button>

对于你的 JS：

$(document).on('click', '.test', function (e) {
  var target = $(this).attr('data-image-target');
  $('#media > img').css('display', 'none');
  $('#media > img[data-image=' + target + ']').css('display', 'block');
});

Answer 3

您的问题是您为按钮分配了多个类名，您只需要使用第一个。

尝试：

$(document).on('click', '.test', function (e) {
    var category = "." + this.className.split(" ").shift(), $media = $('#media'); //Get the first class name from the class names of the element
     $media.children('img').css('display', 'none'); 
     //You can use $media.children('img').hide()
     $media.children(category).css('display', 'block'); 
     //You can use  $media.children(category).show()
});

演示

Answer 4

您的 jsfiddle 需要为一件事启用 jquery。您还想在按钮中获得第一堂课。所以试试这个：

$(document).on('click', '.test', function (e) {
    category = $(this).attr('class').split(' ')[0];
    $('.' + category).css('display', 'none');
    $('.' + category).css('display', 'block');
});