javascript - 有什么方法可以简化此方法吗？在 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 处理程序。您不需要为每个操作重复它。

此处您要遵循的模式称为“不要重复自己”或 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>