私の場合の要素オプションの表示と非表示

Question

ページ上の要素を非表示にする必要があるときに、少し難しかったです。

私はこのスクリプトを使用して、ページ上の要素のメインコントローラであるマルチ選択ドロップダウン要素（http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1）を作成しています。

これは、選択された要素の配列を返し、my要素のshowIfValuesはJSONファイルに設定されています。私は、アレイ内のドロップダウン要素（例：[ "VALUE1"、 "値2"]）から選択された値を取得

1. ：

   私の機能は、これを行う必要があります。

2. showIfValueで上記の配列の値がどこにあるのかを調べるには
3. 複数選択ドロップダウンの変更で、いずれかのフィールドが削除された場合は、その要素を削除しますページ。

showHideHendler機能の凡例： INP

• 私は
• controlInpページに表示したい入力フィールドのIDは、この場合には（制御入力される複数選択ドロップダウン）
• 値は、要素の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(); 
    } 
} 

これは、いくつかの要素に動作しますが、今はそれが私のoldStateフィールドが隠されていない上書きされます。

どんな種類のヘルプでも大歓迎です。前もって感謝します。

Answer 1

多くのことを見て、最も簡単な方法は、基本的にすべての要素を削除し、複数の選択ドロップダウン要素が変更されたときに再び表示することです。

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は必要なくなりました。

これは将来的に誰かに役立つことを願っています。