jquery点击图标来回切换的几种方法（如开关
先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。
//点击每个按钮后进行按钮切换图片操作
$(".tab-bar-item").on("click", function () {
//先const clickImg变量为他的data属性（选中图片） ，然后找到img图片的src属性将未选中的图片点击后替换为选中图片
const clickImg = $(this).data("img");
$(this).find("img").attr("src",clickImg);
//找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了
$(this).siblings().each(function(){
const noclickImg= $(this).attr("img")
$(this).find("img").attr("src",noclickImg);
})
}
怎么用jQuery做出按下不同的按钮切换不同的图片呢
var $img= $('image_div')
$('btn_four').on('click', function (e) {
var url,
index = $(e.target).index();
switch (index)
{
case 0: { url = '猫图的地址' }; break; //猫狗
// case 1……
}
$img.attr('src', url);
})
jquery如何将一个点击左右按钮切换图片的效果封装成可用于在同一个模板中其他块使用
(function (A){
var defaults={
picCourseListId:"pic_course_list",
picCourseListInnerId:"pic_course_list_inner",
prevId:"prev",
nextId:"next",
itemTag:"li"
};
A.a=function tpqh(options){
var option=defaults;
if(typeof(option)=="Object"){
for(var k in options){
option[k]=options[k];
}
}
var pic_course_list = document.getElementById(option.picCourseListId);
var pic_course_list_inner = document.getElementById(option.picCourseListInnerId);
var prev = document.getElementById(option.prevId);
var next = document.getElementById(option.nextId);
var imgLen = pic_course_list.getElementsByTagName(option.itemTag).length;
pic_course_list_inner.style.width = pic_course_list.offsetWidth * imgLen + "px";
function runRight(prev, curBtn, wrap) {
prev.style.cursor = "pointer";
if((imgLen - (wrap.scrollLeft / 442)) 2) {
wrap.scrollLeft += 442;
} else {
wrap.scrollLeft += 442 * (imgLen - (wrap.scrollLeft / 442));
curBtn.style.cursor = "default";
}
}
function runLeft(next, curBtn, wrap) {
next.style.cursor = "pointer";
if((wrap.scrollLeft / 442) 1) {
wrap.scrollLeft -= 442;
} else {
wrap.scrollLeft -= 442 * (wrap.scrollLeft / 442);
curBtn.style.cursor = "default";
}
}
prev.onclick = function() {
runLeft(next, this, pic_course_list);
}
next.onclick = function() {
runRight(prev, this, pic_course_list);
}
}
})(window)
封装成这样就可以在其它地方调用了：a({});