Jak połączyć 3 funkcje w jedną?

pytanie zadane 27 sierpnia 2019 w JavaScript przez Ruscin Nowicjusz (180 p.)

Chciałbym połączyć ze sobą 3 funkcje, ponieważ czuję, że jest to możliwe, jednak nie mam pomysłu na to, jak to zrobić. To są funkcje jakie chciałbym połączyć:

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

A tutaj moje rozwiązanie:

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

});

Niestety, jedyne co ono powoduje, to znikanie danego location-type, a jego pojawienie już nie działa

komentarz 28 sierpnia 2019 przez Milesq Nałogowiec (32,020 p.)

Może mógłbyś zastąpić #check i tu numer na klasę .check

Nadajesz ją elementom html które chcesz sprawdzić i zalatwione

2 odpowiedzi

odpowiedź 27 sierpnia 2019 przez pablop76 VIP (123,180 p.)

Proponuje zapoznać się z metodą on()

<form>
  <div>
    <input type="checkbox" id="check1" name="" value="">
    <label for="check1">checkbox 1</label>
  </div>
	  <div>
    <input type="checkbox" id="check2" name="" value="">
    <label for="check2">checkbox 2</label>
  </div>
	  <div>
    <input type="checkbox" id="check3" name="" value="">
    <label for="check3">checkbox 3</label>
  </div>
</form>

$("form").on("click", "input",function () {
	console.log($( this )[0].id);
});

odpowiedź 27 sierpnia 2019 przez theochse Obywatel (1,310 p.)


for(var i = 1; i <= 3; i++) {
  $("#check"+i).click(function(){
      if (document.getElementById('check'+i).checked)
      {
              $(".location-type"+i).removeClass("display-none")
      }
      else {
          $(".location-type"+i).addClass("display-none");
      }
  });
}

Proponuję takie rozwiązanie :)

komentarz 27 sierpnia 2019 przez Ruscin Nowicjusz (180 p.)

takie rozwiązanie powoduje taki błąd w console logu:
"Uncaught TypeError: Cannot read property 'checked' of null"

Próbowałem to jakoś poprawić, jednak bezskutecznie. Nie wiesz może z czego ten błąd może wynikać?

komentarz 27 sierpnia 2019 przez theochse Obywatel (1,310 p.)

Wygląda na to, że document.getElementById('check'+i) zwraca null. Co ci zwraca konsola w przeglądarce, gdy wpiszesz document.getElementById('check1')? Jesteś pewien, że masz element o takich id jak check1, check2, check3?

komentarz 27 sierpnia 2019 przez Ruscin Nowicjusz (180 p.)

Tak, jestem pewien, ponieważ te elementy znikają po odznaczeniu checkboxa. Jedynie nie pojawiają się z powrotem. Zmieniłem funkcję na taką:

$("#check3, #check2, #check1").click(function () {
    switch (true) {
        case ($(this).data("value") === 1):
            {
                if ($("#check1").checked) {
                    $(".location-type1").removeClass("display-none");
                }
                else {
                    $(".location-type1").addClass("display-none");
                }
            }
    }
});

Jednak problem tego, że obiekt nie pojawia się po zniknięciu pozostał

komentarz 27 sierpnia 2019 przez theochse Obywatel (1,310 p.)

A na jakiej zasadzie miałby się pojawić z powrotem? Nie można go kliknąć, bo zniknął, więc się już więcej nie pojawi.

komentarz 27 sierpnia 2019 przez Ruscin Nowicjusz (180 p.)

Checkbox, w którego się klika usuwa odrębnego diva. Gdy jest zaznaczony powinien usuwać klasę "dispaly-none" z owego diva, jednak tego nie robi. Sam checkbox nie znika nawet na chwilę, właśnie po to, aby można było go dowolnie zaznaczać i odznaczać