如何使用jquery使用同一选择器执行不同的函数_Jquery_Jquery Selectors

如何使用jquery使用同一选择器执行不同的函数

jquery

如何使用jquery使用同一选择器执行不同的函数,jquery,jquery-selectors,Jquery,Jquery Selectors,我有许多相同的类选择器，我希望每个类有不同的函数 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){

我有许多相同的类选择器，我希望每个类有不同的函数

<!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>


$（文档）.ready（函数（）{
变量a1=$（“按钮”）[0]；
变量a2=$（“按钮”）[1]；
变量a3=$（“按钮”）[2]；
var b1=$（“.as”）[0]；
变量b2=$（“.as”）[1]；
var b3=$（“.as”）[2]；
$（a1）。单击（函数（）{
$（b1）.toggle（）；
})；$（a2）。单击（函数（）{
$（b2）.css（“背景色”、“黄色”）；
})；$（a3）。单击（函数（）{
$（b3）.css（“颜色”、“黄色”）；
});
});
如果你点击我，我就会消失
点击我离开
也单击我
123

此方法工作正常，但如何在单行中执行此操作？

使用可能是一种方法：

<!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>


$（文档）.ready（函数（）{
$（'.as'）。在（'click'，function（）上{
var action=$（this.data（'action'）；
开关（动作）{
“删除”案例：
$（this.remove（）；
打破
案例“colorBg”：
$（this.css（“背景色”、“黄色”）；
打破
案例“colorTxt”：
$（this.css（“颜色”、“黄色”）；
打破
违约：
控制台日志（操作）；
}
});
});
如果您单击我，我将消失
点击我离开
也单击我

已编辑：必须用每个“.as”元素“绑定”每个按钮。不建议按数字等进行此操作。这是一个非常耦合的解决方案。这是一种重新表述：

<!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>


$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
var action=$（this.data（'action'）；
开关（动作）{
“删除”案例：
$（'.as[data action=remove]'）.remove（）；
打破
案例“colorBg”：
$（'.as[data action=colorBg]'）.css（“背景色”、“黄色”）；
打破
案例“colorTxt”：
$（'.as[data action=colorTxt]'）.css（“颜色”、“黄色”）；
打破
违约：
控制台日志（操作）；
}
});
});
单击按钮1使我消失
单击按钮2绘制我的背景
单击按钮2为我的文本着色
1.
2.
3.

使用可能是一种方法：

<!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>


$（文档）.ready（函数（）{
$（'.as'）。在（'click'，function（）上{
var action=$（this.data（'action'）；
开关（动作）{
“删除”案例：
$（this.remove（）；
打破
案例“colorBg”：
$（this.css（“背景色”、“黄色”）；
打破
案例“colorTxt”：
$（this.css（“颜色”、“黄色”）；
打破
违约：
控制台日志（操作）；
}
});
});
如果您单击我，我将消失
点击我离开
也单击我

已编辑：必须用每个“.as”元素“绑定”每个按钮。不建议按数字等进行此操作。这是一个非常耦合的解决方案。这是一种重新表述：

<!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>


$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
var action=$（this.data（'action'）；
开关（动作）{
“删除”案例：
$（'.as[data action=remove]'）.remove（）；
打破
案例“colorBg”：
$（'.as[data action=colorBg]'）.css（“背景色”、“黄色”）；
打破
案例“colorTxt”：
$（'.as[data action=colorTxt]'）.css（“颜色”、“黄色”）；
打破
违约：
控制台日志（操作）；
}
});
});
单击按钮1使我消失
单击按钮2绘制我的背景
单击按钮2为我的文本着色
1.
2.
3.

但是我不想删除按钮那么为什么中的文本是“如果你点击我，我会消失”等等？这有点让人困惑我想在点击按钮时消失，但我不想删除按钮，那么为什么中的文本是“如果你点击我，我会消失”等等？这让我有点困惑，我想在点击按钮时消失