Показывать контент на основе уникального выбора или с другой комбинацией флажков (например, более 2) - PullRequest
Новая
       70

Показывать контент на основе уникального выбора или с другой комбинацией флажков (например, более 2)

0 голосов
/ 31 октября 2018

Мне нужно показать соответствующее изображение в соответствии с выбором элементов управления флажка, оно работает в момент выбора блока и отображения его соответствующего содержимого, но если я удаляю выделение из некоторых из них, оно больше не работает. 

   $(".checkboxmark").change(function(){    
      var val=''; 
     if($(this).is(':checked')) {

    $.each($('.checkboxmark:checked'), function(i) {
        val += '#' + $(this).attr('id');        
    });

    switch (val) {
        case '#nationals#usa_canada#latinoamerica':
            $(".div5").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#usa_canada':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#latinoamerica':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#usa_canada':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#latinoamerica':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
         case '#usa_canada#latinoamerica':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        default:
            $(".div4").fadeIn(400);
            break;
    }
 } 
});

Пример:

Если я отмечаю какое-либо уникальное поле или любую комбинацию блоков, я правильно показываю результат отдельного выбора или соответствующую комбинацию, но если я снимаю флажок или удаляю любой выбор, то он перестает работать и не показывает мне предполагаемый активный выбор или выбор по умолчанию, когда ничего не выбрано.

У меня есть рабочая скрипка в этом URL: https://jsfiddle.net/alonsoct/9koqe4fr/

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Я обновил свой скрипт с помощью оператора else https://jsfiddle.net/alonsoct/9koqe4fr/

$(".checkboxmark").change(function(){    
  var val=''; 
  if($(this).is(':checked')) {

    $.each($('.checkboxmark:checked'), function(i) {
        val += '#' + $(this).attr('id');        
    });

    switch (val) {
        case '#nationals#usa_canada#latinoamerica':
            $(".div5").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#usa_canada':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#latinoamerica':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#usa_canada':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#latinoamerica':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
         case '#usa_canada#latinoamerica':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        default:
            $(".div5").fadeIn(400);
            break;
    }
}else{


 $.each($('.checkboxmark').not(':checked'), function(i) {
    val += '#' + $(this).attr('id'); 
     switch (val) {
     case '#nationals#usa_canada#latinoamerica':
            $(".div4").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#nationals':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#usa_canada':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#latinoamerica':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#nationals#usa_canada':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;    
      case '#nationals#latinoamerica':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#usa_canada#latinoamerica':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;  
       default:
            $(".div4").fadeIn(400);
            break;

     }

   });

  } 
 });
0 голосов
/ 31 октября 2018

Нет смысла использовать много-много дивов для того, что вы пытаетесь сделать. Также, если вы добавите больше опций в будущем, вам будет сложно управлять. Я удалил все, кроме одного div и сделал его видимым по умолчанию. Дополнительно

  1. Я изменил jQuery, чтобы установить val равным идентификатору всех проверяемых элементов. (Если ни один не проверен, то он будет пустым, что нормально).

  2. Далее он устанавливает val равным all_off, если ни один не отмечен.

  3. Затем он устанавливает val равным all_on, если все проверены путем сравнения пронумерованных проверенных с общим.

  4. Наконец, он экспортирует val в innerHTML элемента div, показывая его пользователю. 

/*I need to show the corresponding image according to the checkbox controls selection, it works at the moment of selecting a box and showing its respective content, but if I remove the selection from some of them it doesn't work anymore.*/


/*Example
If I check any box, or any combination of boxes shows me correctly the result of the selection or combination, but if I uncheck any of the boxes stops working the switch script*/

/*If I select a unique option and the removal does not show me the default element */


$(".checkboxmark").change(function(){    
    var val=''; 
        
        $.each($('.checkboxmark:checked'), function(i,v) {
        console.log(v.id);
            val += v.id +" "; 
        });
        if($('.checkboxmark:checked').length==0){
        val = "all_off";
        }
        if($('.checkboxmark:checked').length==$('.checkboxmark').length){
        val = "all_on";
        }
        $('.imgMap')[0].innerText = val;
 }); 
 
div
{
    background:#ddd;
    width:100px;
    height:100px;
    margin:10px;
 
    
    
}
<form>
<label for="nationals">nationals</label>
 <input type="checkbox" id="nationals" class="checkboxmark">
 <br/>
<label for="usa_canada">usa and canada</label>
 <input type="checkbox" id="usa_canada" class="checkboxmark">
 <br/>
<label for="latinoamerica">latinoamerica</label>
 <input type="checkbox" id="latinoamerica" class="checkboxmark">
</form> 
     
<div class="imgMap"></div>
...