Javascript 有什么方法可以简化这个方法吗？在jquery上隐藏/显示元素

我想问你们，我是否可以简化这段代码，因为我认为这段代码可能会更少，但我现在正在学习Javascript/Jquery

谢谢

<script type="text/javascript">
    $(document).ready(
    function(){
            $(".facebook").click(function () {
                    $("#facebook_prices").show("slow")
                    $("#twitter_prices").hide("slow")
                    $("#youtube_prices").hide("slow");
            });});

    $(document).ready(
    function(){
            $(".twitter").click(function () {
                    $("#twitter_prices").show("slow")
                    $("#facebook_prices").hide("slow")
                    $("#youtube_prices").hide("slow");
            });});

    $(document).ready(
    function(){
            $(".youtube").click(function () {
                    $("#youtube_prices").show("slow")
                    $("#facebook_prices").hide("slow")
                    $("#twitter_prices").hide("slow");
            });});
</script>

$（文件）。准备好了吗(
函数（）{
$（“.facebook”）。单击（函数（）{
美元（“#facebook#U价格”）.show（“慢”）
$（“推特价格”）.hide（“慢”）
美元（“#youtube#U价格”）。隐藏（“慢”）；
});});
$（文件）。准备好了吗(
函数（）{
$（“.twitter”）。单击（函数（）{
美元（“#推特价格”）.show（“慢”）
美元（“#facebook#U价格”）。隐藏（“慢”）
美元（“#youtube#U价格”）。隐藏（“慢”）；
});});
$（文件）。准备好了吗(
函数（）{
$（“.youtube”）。单击（函数（）{
美元（“#youtube#U价格”）。显示（“慢”）
美元（“#facebook#U价格”）。隐藏（“慢”）
美元（“#推特价格”）。隐藏（“慢”）；
});});

首先要做的是只使用一个document.ready处理程序。您不需要在每次操作中重复此操作

在这里，你要遵循的模式叫做“不要重复你自己”，或者“干”。要实现这一点，您可以将公共类应用于触发事件的元素，并使用

href

（假设触发器是

a

元素）或

数据

属性来存储自定义元数据，以分隔每个元素执行的操作。试试这个：

$（文档）.ready（函数（）{
$（“.trigger”）。单击（函数（e）{
e、 预防默认值（）；
$（'price'）.hide（'slow'）；
$（$（this.attr（'href'））.show（“慢”）
});
});
.price{display:none；}

Facebook价格。。。
推特价格。。。
Youtube价格。。。
首先要做的是只使用一个document.ready处理程序。您不需要在每次操作中重复此操作

在这里，你要遵循的模式叫做“不要重复你自己”，或者“干”。要实现这一点，您可以将公共类应用于触发事件的元素，并使用
href
（假设触发器是
a
元素）或
数据
属性来存储自定义元数据，以分隔每个元素执行的操作。试试这个：


$（文档）.ready（函数（）{
$（“.trigger”）。单击（函数（e）{
e、 预防默认值（）；
$（'price'）.hide（'slow'）；
$（$（this.attr（'href'））.show（“慢”）
});
});
.price{display:none；}

Facebook价格。。。
推特价格。。。
Youtube价格。。。
您可以使用逗号（
，
）来表示与
隐藏（）类似的元素。

检查以下代码：

$(document).ready(function () {
    $(".facebook").click(function () {
        $("#facebook_prices").show("slow");
        $("#twitter_prices,#youtube_prices").hide("slow");
    });
    $(".twitter").click(function () {
        $("#twitter_prices").show("slow");
        $("#facebook_prices,#youtube_prices").hide("slow");
    });
    $(".youtube").click(function () {
        $("#youtube_prices").show("slow");
        $("#facebook_prices,#twitter_prices").hide("slow");
    });
});

您可以使用逗号（
，
）来表示类似于
隐藏（）的元素。

检查以下代码：

$(document).ready(function () {
    $(".facebook").click(function () {
        $("#facebook_prices").show("slow");
        $("#twitter_prices,#youtube_prices").hide("slow");
    });
    $(".twitter").click(function () {
        $("#twitter_prices").show("slow");
        $("#facebook_prices,#youtube_prices").hide("slow");
    });
    $(".youtube").click(function () {
        $("#youtube_prices").show("slow");
        $("#facebook_prices,#twitter_prices").hide("slow");
    });
});

检查下面的实现。删除了重复的.ready（）方法并合并了隐藏函数

<script type="text/javascript">
    function hideAll(){
        $("#facebook_prices").hide("slow")
        $("#twitter_prices").hide("slow")
        $("#youtube_prices").hide("slow");
    }

    $(document).ready(
    function(){
            $(".facebook").click(function () {
                    hideAll();
                    $("#facebook_prices").show("slow");
            });

            $(".twitter").click(function () {
                    hideAll();
                    $("#twitter_prices").show("slow");
            });

            $(".youtube").click(function () {
                    hideAll();
                    $("#youtube_prices").show("slow");
            });
    });
</script>


函数hideAll（）{
美元（“#facebook#U价格”）。隐藏（“慢”）
$（“推特价格”）.hide（“慢”）
美元（“#youtube#U价格”）。隐藏（“慢”）；
}
$（文件）。准备好了吗(
函数（）{
$（“.facebook”）。单击（函数（）{
希德尔（）；
美元（“#facebook#U价格”）。显示（“慢”）；
});
$（“.twitter”）。单击（函数（）{
希德尔（）；
美元（“#推特价格”）。显示（“慢”）；
});
$（“.youtube”）。单击（函数（）{
希德尔（）；
美元（“#youtube#U价格”）。显示（“慢”）；
});
});

希望这有帮助：）
检查以下实现。删除了重复的.ready（）方法并合并了隐藏函数

<script type="text/javascript">
    function hideAll(){
        $("#facebook_prices").hide("slow")
        $("#twitter_prices").hide("slow")
        $("#youtube_prices").hide("slow");
    }

    $(document).ready(
    function(){
            $(".facebook").click(function () {
                    hideAll();
                    $("#facebook_prices").show("slow");
            });

            $(".twitter").click(function () {
                    hideAll();
                    $("#twitter_prices").show("slow");
            });

            $(".youtube").click(function () {
                    hideAll();
                    $("#youtube_prices").show("slow");
            });
    });
</script>


函数hideAll（）{
美元（“#facebook#U价格”）。隐藏（“慢”）
$（“推特价格”）.hide（“慢”）
美元（“#youtube#U价格”）。隐藏（“慢”）；
}
$（文件）。准备好了吗(
函数（）{
$（“.facebook”）。单击（函数（）{
希德尔（）；
美元（“#facebook#U价格”）。显示（“慢”）；
});
$（“.twitter”）。单击（函数（）{
希德尔（）；
美元（“#推特价格”）。显示（“慢”）；
});
$（“.youtube”）。单击（函数（）{
希德尔（）；
美元（“#youtube#U价格”）。显示（“慢”）；
});
});

希望这有帮助：）
也添加HTML以获得更好的洞察力也添加HTML以获得更好的洞察力您的
hideAll（）
函数显示
\facebook\u prices
。重复的
click（）
处理程序也是不必要的重复。噢！我的错。抄袭问题时遗漏了它@罗里姆克罗桑谢谢：+1。问题没有HTML实现，并且假设HTML不是我的风格，因此添加了重复的
click（）
。如果有更好的方法，我愿意接受建议。当然，我在上面发布了一个答案。您的
hideAll（）
函数显示了
\facebook\u prices
。重复的
click（）
处理程序也是不必要的重复。噢！我的错。抄袭问题时遗漏了它@罗里姆克罗桑谢谢：+1。问题没有HTML实现，并且假设HTML不是我的风格，因此添加了重复的
click（）
。如果有更好的方法，我愿意接受建议。当然，我在上面发布了一个答案。可以说，这仍然是不必要的重复。可以说，这仍然是不必要的重复。谢谢它的工作，我修改了我的代码上的一些东西，现在它就像一个魅力！非常感谢。谢谢它的工作，我已经修改了一些东西，我的代码，现在它的工作就像一个魅力！非常感谢。