如何在 jquery 中编写 onclick="slide(-1)" ？答案

【问题标题】：how can I write onclick="slide(-1)" in jquery?如何在 jquery 中编写 onclick="slide(-1)" ？
【发布时间】：2023-03-15 18:53:01
【问题描述】：

我正在 jquery 中制作图像滑块。我第一次在 javascript 中完成，现在我想在 jquery 中转换代码。

问题是我如何在 jquery 中写onclick="slide(-1)"？

HTML：

<div id="container">
    <img id="img" src="img/img1.jpg">
    <div id="left-holder"><img class="left" src="img/arrow-left.png"></div>
    <div id="right-holder"><img class="right" src="img/arrow-right.png"></div>
</div>

CSS：

#container {
width: 1024px;
height: 768px;
margin: 20px auto;
position: relative;
}

#img {
width: 1024px;
height: 768px;
position: absolute;
}

#left-holder {
height: 768px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}

#right-holder {
height: 768px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}

.left {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0px;
cursor: pointer;
}

.right {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
right: 0px;
cursor: pointer;
}

jquery：

var imagecount = 1;
var total = 8;
function slide(x){
   var image = $("#img");
   imagecount = imagecount + x;
   if(imagecount > total) { imagecount = 1;}
   if(imagecount < 1) { imagecount = total;}
   image.attr("src", "img/img"+ imagecount + ".jpg");
}

图像被称为：img1.jpg、img2.jpg、..

提前谢谢你！

【问题讨论】：

放下css，再问你的问题。你想要什么？ /什么不工作？要么你的英语不是很gd，要么你不明白你在做什么，并且在那里问一个没有意义的套利问题。就像问我如何将橙子变成水果一样。所以逻辑是，也许英语不是你的第一语言，或者你错过了一些关键信息。
在您的代码中看不到 onclick="slide(-1)"
所以，我用 javascript 编写了代码，现在我想用 jquery 编写它，并且有属性 onclick=" slide(-1)" 我想写同样的东西，但是在 jquery 中。

标签： jquery

【解决方案1】：

您可以尝试更新您的脚本，例如：

var imagecount = 1;
var total = 8;
function slide(x){
   var image = $("#img");
   imagecount = imagecount + x;
   if(imagecount > total) { imagecount = 1;}
   if(imagecount < 1) { imagecount = total;}
   image.attr("src", "img/img"+ imagecount + ".jpg");
}
$(document).ready(function(){
    $("#left-holder").click(function(){
        slide(-1);
    });
    $("#right-holder").click(function(){
        slide(1);
    });
});

更多关于绑定点击的信息，你可以查看这个链接JQuery Click API

【讨论】：

非常感谢您的回答！