如何使用 jquery 使用相同的选择器执行不同的功能

Question

我有很多相同的类选择器，我希望每个类都有不同的功能。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var a1 = $("button")[0];
                var a2= $("button")[1];
                var a3 = $("button")[2];
                var b1 = $(".as")[0];
                var b2 = $(".as")[1];
                var b3 = $(".as")[2];
                $(a1).click(function(){
                    $(b1).toggle();
                });$(a2).click(function(){
                    $(b2).css("background-color", "yellow");
                });$(a3).click(function(){
                    $(b3).css("color", "yellow");
                });
            });
        </script>
    </head>
    <body>
        <p class="as">If you click on me, I will disappear.</p>
        <p class="as">Click me away!</p>
        <p class="as">Click me too!</p>
        <button>1</button><button>2</button><button>3</button>
    </body>
</html>

这个方法很好用，但是单行怎么做呢？

Answer 1

使用data attributes 可能是一种方法：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.as').on('click', function() {
            var action = $(this).data('action');

            switch(action) {
                case 'remove':
                    $(this).remove();
                    break;
                case 'colorBg':
                    $(this).css("background-color", "yellow");
                    break;
                case 'colorTxt':
                    $(this).css("color", "yellow");
                    break;
                default:
                    console.log(action);
            }
        });
    });
</script>
</head>
<body>
    <p class="as" data-action="remove">If you click on me, I will disappear.</p>
    <p class="as" data-action="colorBg">Click me away!</p>
    <p class="as" data-action="colorTxt">Click me too!</p>
</body>
</html>

---

已编辑：您必须将每个按钮与每个“.as”元素“绑定”。不建议通过号码1 等来执行此操作。这是一个非常耦合的解决方案。这是重新表述：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">            </script>
<script>
    $(document).ready(function(){
        $('button').on('click', function() {
            var action = $(this).data('action');

            switch(action) {
                case 'remove':
                    $('.as[data-action=remove]').remove();
                    break;
                case 'colorBg':
                    $('.as[data-action=colorBg]').css("background-color", "yellow");
                    break;
                case 'colorTxt':
                    $('.as[data-action=colorTxt]').css("color", "yellow");
                    break;
                default:
                    console.log(action);
            }
        });
    });
</script>
</head>
<body>

    <p class="as" data-action="remove">Click the button 1 to make me disappear</p>
    <p class="as" data-action="colorBg">Click the button 2 to paint my background</p>
    <p class="as" data-action="colorTxt">Click the button 2 to colorize my text</p>

    <button data-action="remove">1</button>
    <button data-action="colorBg">2</button>
    <button data-action="colorTxt">3</button>

</body>
</html>