선택 가능 항목을 만들고 내부 요소를 기억할 수 없습니다.

Jquery UI를 사용하고 있으며 오늘부터 7 일 후부터 선택 가능한 항목을 표시하려고합니다. 예 :선택 가능 항목을 만들고 내부 요소를 기억할 수 없습니다.

금요일 토요일 일요일 월요일 화요일 수요일 목요일 금요일

각각 당신이 그들 중 하나를 선택할 수있는 항목입니다. 그래서 나는 .selectable()을 사용한다. 아침 새 목록이 항목을 선택하고 그것은 클릭 한 위치하는 것들을 기억할 필요가에서 오후 밤

: 나는 하나 개의 요소를 클릭하면,이 3 개 요소와 새로운 목록이 표시되는지합니다.

첫 번째 선택 항목 인 요일 목록에서 선택한 항목을 변경하면 아침, 오후 및 밤 목록을 다시 표시해야하지만 정리할 수 있으며 원하는 곳 어디에서나 다시 선택할 수 있습니다. 그러나 사실 우리는 전날 또는 다른 날로 돌아 가면 선택한 항목을 기억하고 선택한 항목을 표시해야합니다.

이것은 내 코드입니다. 너무 나빠요.하지만 이것부터 시작하겠습니다.

 dias.forEach((dia) => { 
      switch (dia) { 
       case 0: $("#selectable").append(`<li class="ui-widget-content">Domingo</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 1: $("#selectable").append(`<li class="ui-widget-content">Lunes</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 2: $("#selectable").append(`<li class="ui-widget-content">Martes</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 3: $("#selectable").append(`<li class="ui-widget-content">Miercoles</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 4: $("#selectable").append(`<li class="ui-widget-content">Jueves</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 5: $("#selectable").append(`<li class="ui-widget-content">Viernes</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
       case 6: $("#selectable").append(`<li class="ui-widget-content">Sabado</li><ol id="select-result" hidden> 
        <li class="ui-widget-content"> Mañana</li> 
        <li class="ui-widget-content">Tarde</li> 
        <li class="ui-widget-content">Noche</li> 
        </ol > `); 
        break; 
      } 
     }); 
    }); 

    $(function() { 

     $("#selectable").selectable({ 
      selected: function (event, ui) { 
       $("#select-result").show(); 
       $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected"); 
      } 

     }); 
     $("#select-result").selectable({ 
      selected: function (event, ui) { 

       if ($(ui.selected).hasClass("selected")) { 
        $(ui.selected).removeClass("selected"); 
       } 
       else $(ui.selected).addClass("selected"); 

      } 
     }); 
    }); 


</script> 
</head> 

<body> 


<ol id="selectable"> 
</ol> 

</body> 

</html>

예를 들어 토요일을 클릭하면 아침, 오후 및 밤이 표시됩니다. 하지만 다른 날을 클릭하면 다른 "목록"이 표시되지 않으며 동일한 항목이있는 동일한 목록을 표시합니다. 원하는 항목은 선택 항목없이 빈 항목으로 표시되어 새 항목을 확인하고 다른 날짜로 전환 할 때 기억합니다 선택된 요소들

출처

2017-11-05 Tibo

HTML 컨텐트를 변경할 때 HTML이 변경 되었기 때문에 선택기에 바인딩 된 함수를 업데이트/다시 실행해야합니다. 권리? 아마 switch 문 바로 뒤에 (.unind()가 적절히 삽입 된 상태로) 바인딩을 변경하면 변경 될 것입니다. 이다

, 더 좋아합니다

dias.forEach((dia) => { 
    switch (dia) { 
     ... 
     ... 
    } 
}); 

$("#selectable").unbind().selectable({ 
    selected: function (event, ui) { 
     $("#select-result").show(); 
     $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected"); 
    } 
}); 
    $("#select-result").unbind().selectable({ 
    selected: function (event, ui) { 
     if ($(ui.selected).hasClass("selected")) { 
      $(ui.selected).removeClass("selected"); 
     } 
     else $(ui.selected).addClass("selected"); 
    } 
});

을});

출처

2017-11-05 18:30:25

선택 가능 항목을 만들고 내부 요소를 기억할 수 없습니다.

답변

관련 문제