CODEWITHSUNDEEP
jquery
ORB
ORB

Reputation: 255

I am having trouble targeting the NEXT and PREV buttons in jQuery for my image slider

I am trying to build an image carousel in jQuery. I am having trouble getting the jQuery syntax correct so that jQuery recognizes when I have activated SKIP or BACK.

Here's the 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


});

Unfortunately, I am unable to get any of this to work. I am gettin really frustrate. Can you help me out?

Thanks!

Upvotes: 1

Views: 150

Answers (2)

Md Nazmoon Noor
Md Nazmoon Noor

Reputation: 3307

If you don't want to add id to your buttons then try this.

$(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
        }
    });
});

The selector $('#buttons-wrapper form .btn') will select both your buttons. Then you can check which one is clicked by checking the value property.

Upvotes: 0

ekstrakt
ekstrakt

Reputation: 910

Add id/class to your buttons (make them unique), and access them directly:

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

Then in javascript:

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

P.S.
You don't need to wrap the buttons in a form if it's not submitting to server (a form must have action and method attributes).

Upvotes: 1

Related Questions