jQuery Selector [attribute=value] select element based on a data-attribute value

Description

jQuery Selector [attribute=value] select element based on a data-attribute value

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Selecting Element by Data Attribute</title>
<style>
    ul li {
        display: inline-block;
        margin: 10px;
        list-style: none;
    }/*from www .  j ava 2 s . c  o  m*/
    ul li img.selected{
        outline: 5px solid black;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        // Get selected option value from dropdown
        var slide = $(this).children("option:selected").val();

        // Remove existing selected class from the image
        $(".slides img").removeClass("selected");

        // Select image based on its data-slide attribute value
        $('.slides img[data-slide=' + slide + ']').addClass("selected");
    });
});
</script>
</head>
<body>
    <label>Slide:</label>
    <select>
        <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <hr>
    <ul class="slides">
        <li>
            <img src="image1.png" alt="Club" data-slide="1">
        </li>
        <li>
            <img src="image2.png" alt="Diamond" data-slide="2">
        </li>
        <li>
            <img src="image3.png" alt="Spade" data-slide="3">
        </li>
        <li>
            <img src="image4.png" alt="Heart" data-slide="4">
        </li>
    </ul>
  <hr>
</body>
</html>



PreviousNext

Related