Jquery 如何通过单击按钮更改css显示无或块

当显示属性更改时，单击该按钮

例如， button class=“1”单击结果-第一个img类显示：block， 第二个img类显示：无，第三个img类显示：无

button class=“2”单击结果-第一个img类显示：无， 第二个img类显示：块，第三个img类显示：无

button class=“3”单击结果-第一个img类显示：无， 第二个img类显示：无，第三个img类显示：块

代码笔=

ol，
ul，
李{
列表样式：无；
}
.滑块{
浮动：左；
位置：相对位置；
宽度：980px；
}
img.first-img，
img.second-img，
第三代img{
最大高度：625px；
显示：块；
}
img.second-img，
第三代img{
显示：无；
}

使用

属性class

获取类号，并使用

nth-child（）

选择图像。以下是我的简短回答：

   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

有关问题要求，请参见下面的代码段：

$（文档）.ready（函数（）{
var X=jQuery.noConflict（）；
var realsslider=X（“ul#bxslider”）.bxslider({
速度：1000，
传呼机：错，
下一个文本：“”，
上一个文本：“”，
无穷远：错，
希德·特罗隆德：没错，
onSlideBefore:函数（$slideElement、oldIndex、newIndex）{
changeRealThumb（realThumbSlider，newIndex）；
}
});
var=X（“ul#bxslider寻呼机”）.bxslider({
米斯利德斯：4，
maxSlides:4，
滑动宽度：235，
幻灯片摘要：9，
第一,，
传呼机：错，
速度：1000，
无穷远：错，
希德·特罗隆德：没错，
下一个文本：“”，
上一个文本：“”，
onSlideBefore:函数（$slideElement、oldIndex、newIndex）{
/*X（“#sliderThumbReal ul.active”）.removeClass（“active”）；
$slideElement.addClass（“活动”）*/
}
});
链接RealSliders（realSlider、realSlider）；
if（X（“#bxslider pager li”）.length=3）slider.goToSlide（newIndex）；
else slider.goToSlide（slider.getSlideCount（）-3）；
}
});
$（“按钮”）。单击（函数（）{
var number=$（this.attr（'class'）；
$（'ul li img'）.css（'display'，'none'）；
$（'ul li img:n个子（'+number+'））.css（'display'，'block'）；
})

ol、ul、li{
列表样式：无；
}
.slider{float:左；位置：相对；宽度：980px；}
第一个，第二个，第三个{
最大高度：625px；
显示：块；
}
第二个，第三个{
显示：无；
}
.ori图像按钮{位置：绝对！重要；顶部：0；左侧：0；}

第一类
第二类
第三类
-

如果您喜欢，请告诉我：

JS（带JQuery）/CSS/HTML

$（“按钮”）。单击（函数（）{
$（.first img”）.removeClass（“选定”）；
$（“.second img”）.removeClass（“选定”）；
$（.third img”）.removeClass（“选定”）；
$（“+$（this.attr（“数据项类”））.addClass（“选定”）；
});
ol，
ul，
李{
列表样式：无；
}
.滑块{
浮动：左；
位置：相对位置；
宽度：980px；
}
img.first-img，
img.second-img，
第三代img{
显示：无；
}
.选定{
最大高度：625px；
显示：块！重要；
}

第一类
第二类
第三类









我已将样本张贴在代码笔中，请检查此选项

[view on codepen][1]


  [1]: http://codepen.io/satheeshmallow/pen/xEBpEr

我向您提出了添加类和删除类的要求

这将帮助你取得一些成就

HTML:

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>
<button id="showImage1">
Show Image 1
</button>
<button id="showImage2">
Show Image 2
</button>
<button id="showImage3">
Show Image 3
</button>
<button id="showAll">
Show All
</button>

img {
    width: 10px;
    height: 10px;
}
.display-none{
  display:none;
}
.display-inline{
  display:inline;
}

JS:

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>
<button id="showImage1">
Show Image 1
</button>
<button id="showImage2">
Show Image 2
</button>
<button id="showImage3">
Show Image 3
</button>
<button id="showAll">
Show All
</button>

img {
    width: 10px;
    height: 10px;
}
.display-none{
  display:none;
}
.display-inline{
  display:inline;
}

$（“body”）。在（'click'，'#showImage1'，function（）{debugger；
$（.first img”）.addClass（'display-inline'）.removeClass（'display-none'）；
$（.second img，.third img”）.addClass（'display-none'）.removeClass（'display-inline'）；
});

是。。我想这一次你需要js。可能最简单的方法是让类图像显示为：无；以及使用显示块选择的类。然后单击UsingJS，您将使用class image移动所有元素的选定类，并根据单击的按钮将选定类添加到所需的图像中。PS：按钮在哪里？@Lidaranis按钮在下面创建一个类Ul。我可以使用Jquery吗？如果Jquery可用，您能告诉我吗？：-）谢谢。如果是这种情况，我该怎么办@sosori I应该在不改变脚本的情况下工作。刚刚更新了html。请参阅上面的更新。请让我知道这是否是你一直在寻找的答案`-（我终于尝试使用bxslider了。请单击此处。@sosori它应该可以工作，而不必更改脚本。您只是忘记了导入jquery。刚刚更新了html。请参阅上面的更新。请告诉我这是否是您正在寻找的答案。）for@sosori你把我的脚本放在一个函数里。不要这样做，因为它不会启动。我把它放在函数之外。请告诉我这是否是你想要的答案谢谢。添加了有问题的内容。你如何更改？让我看看我是否做对了。你想让所有1类的图像在按下按钮1时可见，所有2类的图像在按下按钮2时可见，等等。更新了snippet和Fiddle增加了问题。你怎么做
$("body").on('click','#showImage2', function(){debugger;
$(".second-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.third-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showImage3', function(){debugger;
$(".third-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.second-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showAll', function(){
$(".first-img,.second-img,.third-img").addClass('display-inline').removeClass('display-none');
});