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处理程序。您无需为每个操作重复该操作。

您要在此处遵循的模式称为“不要重复自己”或DRY。为此，您可以将通用类应用于触发事件的元素，并使用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>

希望这会有所帮助：）

有什么方法可以捷径这种方法吗？在jQuery上隐藏/显示元素

3 个答案: