В этой статье мы увидим, как находить элементы по значению data-attribute. Вы можете использовать селекторы атрибутов CSS, чтобы найти элемент HTML на основе его значения атрибута данных с помощью jQuery. Селектор используется для выбора элементов с указанным атрибутом. Мы можем использовать селектор CSS Attribute, чтобы получить элемент.

Итак, давайте посмотрим, как jquery находит значение атрибута данных, а jquery получает элемент по атрибуту.

Пример: как получить элемент по атрибуту данных в jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Get Element By Data Attribute In jQuery - Websolutionstuff</title>
<style>
    ul li { 
        float: left;
        margin: 10px;
        list-style: none;
    }
    ul li img.selected{
        outline: 5px solid black;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        var slide = $(this).children("option:selected").val();
                
        $(".slides img").removeClass("selected");
                
        $('.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="images/laravel.jpg" alt="Laravel" data-slide="1">
        </li>
        <li>
            <img src="images/jquery.jpg" alt="jQuery" data-slide="2">
        </li>
        <li>
            <img src="images/php.jpg" alt="PHP" data-slide="3">
        </li>
        <li>
            <img src="images/html.jpg" alt="HTML" data-slide="4">
        </li>
    </ul>
</body>
</html>

Вам также может понравиться: