javascript関数に要素を渡して最初の子にアクセスする方法

Question

C＃のファイルの背後にあるASP.NETコードでチェックボックスを作成しています。ページにコントロールを追加する前に属性値を追加しています。したがって、ASPはチェックボックスを囲むスパンとテキストのラベルに属性を追加しています。

<span data-bind="visible: showCheckBox(this)"> 
    <input id="" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">  
    <label for="">Outside Source</label> 
</span> 

私はKnockout.jsで書かshowCheckBox()と呼ばれる機能を持っている：それはこのようになります。直前のドロップダウンリストで選択した項目の値に基づいて、ターゲットチェックボックスを表示するかどうかを決定します。たとえば、ドロップダウンリストで選択した項目の値が1の場合、対応する値1のターゲットチェックボックスが表示されます。この関数は次のようになります。

function showCheckBox(span) { 
    var value = span.firstChild.value; 
    return value == reason(); 
} 

reason()は、リスト項目ダウン選択ドロップの値を保持するビューモデルの変数です。 私が何をしていても、チェックボックスの値を正しく送信できません。常に定義されていません。

Answer 1

しばらくそれを考えた後、共同研究者がこの解決法を提案しました。

ドロップダウンリストビューモデル変数に対応するIDとしてチェックボックスの値を割り当てるのではなく、代わりにデータバインド属性に割り当てることを提案しました。以下のようにそれをやって

function showCheckBox(id) { 
    return id == reason(); 
} 

を次のようにHTMLその後

<span data-bind="visible: showCheckBox(1)" style="display: none;"> 
<input id="" type="checkbox" 
name="ctl00$MainContent$SecondaryForm$ctl00" value="Outside Source"> 
<label for="" style="display: inline;">Outside Source</label> 
</span> 

に表示されたときに、このようになります。この

cb.Attributes.Add("data-bind", String.Format("visible: showCheckBox({0})", reasonDetails[i].ReasonForSendingNoticeID.ToString())); 

のように見えるファイルの後ろに私のC＃コードでは、私は、機能を変更しましたその要素またはその子を渡すことなく、関数に値を直接渡すことができました。

ご協力いただきありがとうございます。

Answer 2

このHTMLの最初の子は実際にはtextNodeです。見つかった場合はfirstChildが返されます。返される実際の文字は次のとおりです。"↵ "（Aリターンとスペース）。 firstElementChildのサポートテーブルをチェックすることを忘れないでください、また

function showCheckBox(span) { 
    var value = span.firstElementChild.value; 
    return value == reason(); 
} 

：

あなたが代わりにfirstElementChildプロパティを使用することができます。

Answer 3

問題は隠されています。大部分のためです。KnockoutJSを使用していないあなたはthe KnockoutJS checked bindingのドキュメントをチェックしてください。

DOM内のビューモデルをチェックする理由はありません。可視性を処理するものも含めてです。代わりに、ビューモデルを使用してください。あなたは非常に完全な最小限のREPRO投稿が、ここではより多くのなど少ないはず何していない：あなたは上記のアプローチを取ることができない場合は

function ViewModel() { 
 
    var self = this; 
 
    
 
    self.reasons = [{id: 1, txt: "Main reason"}, {id: 2, txt: "Other reason"}]; 
 
    self.reason = ko.observable(self.reasons[0]); 
 
    
 
    self.showCheckBox = ko.computed(function() { 
 
    return self.reason().id === 1; 
 
    }); 
 
    
 
    self.hasOutsideSource = ko.observable(false); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

pre { font-family: consolas; background: smoke; border: 1px solid #ddd; padding: 5px; margin: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: reasons, value: reason, optionsText: 'txt'"></select> 
 

 
<span data-bind="visible: showCheckBox"> 
 
    <label> 
 
    <input data-bind="checked: hasOutsideSource" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">  
 
    Outside Source 
 
    </label> 
 
</span> 
 

 
<hr> 
 
This would be sent to your server/debug info: 
 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

、私は強くスキップ検討をお勧めしますKnockoutJSの使用はおそらくあなたが多くのDOM操作をあなた自身で行う場合に役立つよりも多くのトラブルを引き起こすでしょう。