0

この例では、ユーザーがドロップダウン フィールドからプロジェクト タイプを選択し、選択したタイプに基づいてさまざまなセクションが非表示/表示されます。以下の配列内の ID はフィールドセット ID であり、値はドロップダウン フィールドで選択されたものです。

ここで問題です。特定のプロジェクトが選択されたときに2 つのセクション/フィールドセットを表示したいクライアントがいます。[このオプションは、さまざまなプロジェクト タイプに適用できます]。たとえば、プロジェクトの種類として「パンフレット」を選択した場合、クライアントはパンフレット セクション/フィールドセットと「簡単な詳細」というフィールドセットを表示することを望んでいます。IDは「556」です。

下の配列に「{id : '556', value:'Brochure'}」を追加すると、「Brief Details」セクション/フィールドセットが表示されますが、この場合にも表示されるはずの「Brochure」フィールドセットが非表示になります. なぜこれが起こっているのかはわかりますが、この JavaScript を機能させる方法がわかりません。

では、以下のコード ベースを使用してこれをコーディングするにはどうすればよいですか [選択したプロジェクト タイプがパンフレットと等しい場合、フィールドセット 556と159 を表示]

var projectTypes = new Array (
    {id : '123', value:'Banner'},
    {id : '456', value:'Ad'},
    {id : '789', value:'Graphics'},
    {id : '987', value:'Billboard'},
    {id : '654', value:'Booklet'},
    {id : '321', value:'Tickets'},
    {id : '147', value:'Window'},
    {id : '159', value:'Brochure'}
    );

/*function below occurs onChange event of project type dropdown:*/
refreshSections(project_type);  

/*
 *  Function used to hide/show sections based on selected project type
 */
function refreshSections(selectedType) 
{   
    for (var i = 0; i < projectTypes.length; i++) 
    {
        if (projectTypes[i].value == selectedType) 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        } else {
            document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
        }
    }   
}
4

2 に答える 2

0

code/html をどの程度自由に変更できるかはわかりませんが、関連するセクションへの適切なアクセスがあれば、projectTypes 配列に別の値を追加したくなるでしょう。実装は必ずしもこのようにする必要はありませんが、たとえば次のようになります。

var projectTypes = new Array (
    {id : '556', value:'Brief Details', showSections: [556, 159]}
);

すべての「非表示セクション」に共通のクラス名を追加します。

<div id="section-156" class="hideable-section"><!--content--></div>

次に、そのプロパティをオーバーライドとして使用するように関数を変更します。

function refreshSections(selectedType) {   
    var i, j;
    //hide everything by default (something like document.getElementsByClassName('hideable-section')
    for (i = 0; i < projectTypes.length; i++) {
        if (projectTypes[i].value == selectedType) {
            if(projectTypes[i].showSections != null) {
                for(j = 0; j < projectTypes[i].showSections.length; j++){
                    document.getElementById("section-"+ projectTypes[i].showSections[j].toString()).style.display = '';
                }
            }
            else {
                document.getElementById("section-"+ projectTypes[i].id).style.display = '';
            }
        }
    }   
}
于 2012-04-24T14:03:45.873 に答える
0

単一のIDの代わりに配列を使用するのはどうですか

{id : ['159','556'], value:'Brochure'}

そして、関数コードで行うことができます

if (projectTypes[i].value === selectedType) {
  if (typeof projectTypes[i].id == "object") {
    var targets = typeof projectTypes[i].id;
    for (var j = 0, l = targets.length; j < l; j++) {
      document.getElementById("section-"+ targets[j]).style.display = '';
    }
  } else {
    document.getElementById("section-"+ projectTypes[i].id).style.display = '';
  }
} else {
  document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}

私はそれを深くテストしませんでした...いくつかのマークアップとJSコードでフィドルを追加して、解決策を確認しやすくすることができます

于 2012-04-24T14:02:46.827 に答える