顯示和隱藏我的情況的元素選項

當我需要隱藏頁面上的元素時，我遇到了一些困難。顯示和隱藏我的情況的元素選項

我正在使用此腳本創建我的多選下拉元素，它是頁面上元素的主控制器（http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1）。

它返回一個選定元素的數組，我的元素在JSON文件中設置了它們的showIfValues。

我的函數應該做到這一點：在陣列從下拉元件

我得到選擇的值（例如[ 「VALUE1」，「VALUE2」]）。
通過所有的元素去並找到在showIfValue是從上方的陣列的任何值，顯示它
在多選下拉的變化，如果任何字段被除去，除去元件，但將其餘部分上這一頁。

Legend在showHideHendler功能：

INP是輸入字段的ID我想顯示的頁面
controlInp上是控制輸入（在這種情況下，多選下拉）
值是從元素的JSON文件中填充showIfValues的數組

到目前爲止，我在這裏做了。這些是我實施的事情。

function diffArray(arr1, arr2) { 
    return arr1.concat(arr2).filter(function (val) { 
     if (!(arr1.includes(val) && arr2.includes(val))) 
      return val; 
    }); 
} 

function getSelectedValues(controlInput){ 
    if($('#' + controlInput).attr("multiple") === "multiple"){ 
     // var selectValues = $('#' + controlInput).multipleSelect("getSelects"); 
     var selectValues = []; 
     if($('#' + controlInput).multipleSelect("getSelects") != null) { 
      selectValues = $('#' + controlInput).multipleSelect("getSelects"); 
     } 

     return selectValues; 
    } 
} 

var multipleShowHideHandler = (function() { 

    var selectedValues = []; 

    function setSelectedValues(value){ 
     selectedValues.push(value); 
    } 

    function overrideSelected(value){ 
     selectedValues = value; 
    } 

    function getSelectedValues(){ 
     return selectedValues; 
    } 

    return { 
     setSelectedValues: setSelectedValues, 
     getSelectedValues: getSelectedValues, 
     overrideSelected: overrideSelected 
    } 

})(); 



function showHideHandler(inp, controlInp, value) { 
    if (!$('#' + controlInp).is(':checkbox') && !($.isArray(value))) { 
     value = $.makeArray(value); 
    } 

    var selectedValues = getSelectedValues(controlInp); 

    if(($('#' + controlInp).attr("multiple") === "multiple") && !$.isEmptyObject(selectedValues)){ 
     $('#' + controlInp).change(function(){ 

      var oldState = multipleShowHideHandler.getSelectedValues(); 
      var selectedValues = getSelectedValues(controlInp); 

      if($.isEmptyObject(oldState)){ 
       $.each(selectedValues, function(i, val){ 
        multipleShowHideHandler.setSelectedValues(val); 
       }); 
      } 

      var differentArray = diffArray(selectedValues, oldState); 

      if(!$.isEmptyObject(differentArray)){ 
       if(($.inArray(differentArray[0], value) !== -1)){ 
        $('#' + inp + 'Container').hide(); 
       } 
       multipleShowHideHandler.overrideSelected(selectedValues); 
      } 

      //check diff 
      /*if(!$.isEmptyObject(selectedValues) && !$.isEmptyObject(oldState)){ 
       var diff = diffArray(selectedValues, oldState); 
      }*/ 

      $.each(selectedValues, function(i, val){ 
       if(($.inArray(val, value) !== -1)){ 
        $('#' + inp + 'Container').show(); 
       } 
      }); 
     }); 


    }else if (($.inArray($('#' + controlInp).val(), value) > -1) || $('#' + controlInp).prop('checked') === value) { 
     $('#' + inp + 'Container').show(); 
    } else { 
     $('#' + inp + 'Container').hide(); 
    } 
}

這個工程上的一些元素，但目前它覆蓋我的原狀態數的字段不會隱藏。

任何形式的幫助非常感謝。提前致謝。

來源

2017-06-12 Nastasja Sajtos

查看並嘗試很多事情後，我發現最簡單的方法是基本上刪除所有元素，並在多選select dropdown元素的任何更改時再次顯示它們。

所以最終的代碼如下所示：

if(($('#' + controlInp).attr("multiple") === "multiple") && !$.isEmptyObject(selectedValues)){ 
     $('#' + controlInp).change(function(){ 
      var selectedValues = getSelectedValues(controlInp); 
      if(!$.isEmptyObject(selectedValues)){ 
       $('#' + inp + 'Container').hide(); 
       $.each(selectedValues, function(i, val){ 
        if(($.inArray(val, value) !== -1)){ 
         $('#' + inp + 'Container').show(); 
        } 
       }); 
      }else{ 
       $('#' + inp + 'Container').hide(); 
      } 
     }); 
}

沒有必要狀態之前添加後，所以這是我唯一需要的。

不再需要DiffArray和multipleShowHideHandler。

希望這可以幫助未來的人。

來源

2017-06-13 11:26:22

顯示和隱藏我的情況的元素選項

回答

相關問題