有没有办法快捷这个方法？在jquery上隐藏/显示元素

Question

我想问你们，我是否可以快速编写这段代码，因为我认为它可以更少代码，但我现在正在学习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>

Answer 1

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

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

$(document).ready(function() {
  $(".trigger").click(function(e) {
    e.preventDefault();
    $('.price').hide('slow');
    $($(this).attr('href')).show("slow")
  });
});

.price {display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#facebook_prices" class="trigger">Facebook</a>
<a href="#twitter_prices" class="trigger">Twitter</a>
<a href="#youtube_prices" class="trigger">Youtube</a>

<div class="price" id="facebook_prices">
  Facebook prices...
</div>
<div class="price" id="twitter_prices">
  Twitter prices...
</div>
<div class="price" id="youtube_prices">
  Youtube prices...
</div>

Answer 2

您可以使用逗号（,）与hide()类似的元素

检查以下代码：

$(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");
    });
});

Answer 3

检查以下实施。删除了重复的.ready（）方法并合并了hide函数。

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

希望这可以帮助 ：）