javascript - 如何统一功能(将3个功能连接为1个)

Question

我想将 3 个函数合并为 1 个，因为我觉得这是可能的，但我不知道如何正确地实现它

这是我的解决方案。我不明白为什么它只隐藏 location-type2 而不显示它。

我真的不知道这里出了什么问题，因为它正确地隐藏了东西，只是根本不显示它们。

此外，这是我的 HTML。我正在从“数据值”中获取值(value)并使用它来尝试合并这些功能，但它不起作用。

$("#check3, #check2, #check1").click(function () {
    console.log($(this).data("value"));
    if ($(this).data("value") === 1) {

        if ($("#check1").checked) {
            $(".location-type1").removeClass("display-none");
        }
        else {
            $(".location-type1").addClass("display-none");
        }

    }
    else if ($(this).data("value") === 2) {
        if ($("#check2").checked) {
            $(".location-type2").removeClass("display-none");
        }
        else {
            $(".location-type2").addClass("display-none");
        }
    }
    else {
        if ($("#check3").checked) {
            $(".location-type3").removeClass("display-none");
        }
        else {
            $(".location-type3").addClass("display-none");
        }
    }

});

我想合并这 3 个函数:

$("#check1").click(function(){
    if (document.getElementById('check1').checked)
        { 
            $(".location-type1").removeClass("display-none")
        }
    else {
         $(".location-type1").addClass("display-none");
    }
});
$("#check2").click(function(){
    if (document.getElementById('check2').checked)
        {
            $(".location-type2").removeClass("display-none")
        }
    else {

        $(".location-type2").addClass("display-none");
    }
$("#check3").click(function(){
    if (document.getElementById('check3').checked)
        {
            $(".location-type3").removeClass("display-none")
        }
    else {

        $(".location-type3").addClass("display-none");
    }
});      

     <div class="form-group">  <input type="checkbox" style="display: none" id="check1" data-value="1" checked> <label for="check1">Restauracja</label> </div>
     <div class="shop-position location-type1" data-lat="52.4068200" data-lng="16.9299300" data-type="1">
            <div class="location-text">
        <strong>Vininova1</strong>
            <div>Podgórna 14</div>
            <div>Poznań</div>
            <a href="#" class="show-on-map">Pokaż na mapie</a>
            </div>
        </div>

Answer 1

每当您发现自己正在编写与您已经编写的代码相同或非常相似的代码时，您应该停下来思考如何重新编写它以使其更加松散耦合，从而提高可用性。在您的情况下，我们实际上只需要一个包含单个语句的函数。

此外，input 元素已经有一个 value 属性，因此向它们添加一个 data-value 是多余的。

此外，如果可以避免，请不要使用内联样式。它们会导致代码重复并使代码更难阅读和扩展。相反，请使用 CSS 类。

// Get the checkboxes into a JQuery wrapped set
let inputs = $("#parent input[type='checkbox']");

// Set the event handler up on the parent of the 3 checkboxes
$("#parent").on("click", function (event) {
  if(event.target.nodeName === "INPUT"){
    // Get the actual checkbox that was clicked with: event.target 
    // Get the index of the clicked checkbox within the set
    // Toggle the use of the class on the location item that corresponds to the index of the clicked checkbox(es)
    $("#locations div")[$("#parent input[type='checkbox']").index(event.target)].classList.toggle("display-none");
  }
});

.display-none {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <input type="checkbox" value="one">One<br>
  <input type="checkbox" value="two">Two<br>
  <input type="checkbox" value="three">Three
</div>
<div id="locations">
  <div class=".location-type1 display-none">Location 1</div>
  <div class=".location-type2 display-none">Location 2</div>
  <div class=".location-type3 display-none">Location 3</div>  
</div>