Question

我正在尝试在jQuery中构建一个图像轮播。我无法正确获取jQuery语法，以便jQuery识别我何时激活了SKIP或BACK。

这是HTML：

 <div id="buttons-wrapper">
    <form>
      <input type="button" class="btn" value="Back">
      <input type="button" class="btn" value="Skip">
    <select id="your-vote">
       <option value=""></option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
    </select>
</form>
</div>

jQuery的：

$(document).ready(function()
          {
var imageArray=['../images/food1.jpg','../images/food3.jpg','../images/food4.jpg'];

 $('#buttons-wrapper form').on('click',function()
 {
 //access Back button
 if $(this).closest('input').attr('value','Skip')
{
// DISPLAY NEXT IMAGE
}
else 
// PREV IMAGE


});

不幸的是，我无法解决任何问题。我真的很沮丧。你能救我一下吗？

谢谢！

Answer 1

将id / class添加到按钮（使其唯一），并直接访问它们：

<input type="button" id="button_previous" class="btn" value="Back">
<input type="button" id="button_next" class="btn" value="Skip">

然后在javascript：

$('#button_previous').click(function(event){
    //DISPLAY PREVIOUS IMAGE
);
$('#button_next').click(function(event){
    //DISPLAY NEXT IMAGE
);

P.S。
如果没有提交给服务器，则不需要将表单中的按钮包装（表单必须具有action和method属性）。

Answer 2

如果您不想在按钮上添加id，请尝试此操作。

$(document).ready(function(){
    var imageArray=['../images/food1.jpg','../images/food3.jpg','../images/food4.jpg'];

    $('#buttons-wrapper form .btn').on('click', function () {
        //access Back button
        if ($(this).attr('value') === 'Skip') {
            // DISPLAY NEXT IMAGE
        } else {
            // PREV IMAGE
        }
    });
});

选择器$('#buttons-wrapper form .btn')将同时选择两个按钮。然后，您可以通过查看value属性来检查单击了哪一个。

我无法在jQuery中为我的图像滑块定位NEXT和PREV按钮

2 个答案: