これは、私が扱っているのがテーブル行であるという事実とは何の関係もないかもしれませんが、これは私の問題です。選択メニューがあります。これらのオプションのいくつかは、選択すると、フォームのテーブル行を非表示にする必要があります。他の人は同じテーブル行を表示します。現在のスクリプトでは、TRはまったく影響を受けませんが、コンソールにそのイベントを記録しているため、クリックまたは選択時に反応していることがわかります。もう1つの問題は、メニューのいずれか（つまり矢印）が選択されたときにコンソールがログに記録することです。オプションが実際に選択されたときにのみtrを表示/非表示にしたい。私はこれについて十分に明確になっていることを願っています。
私のjQuery：
$('[rel="toggleElement"]').ready(function(){
$(this).on('click', function(){
var elem = $(this).data('elem-id');
elem = $('.'+elem);
if($(this).data('elem-status') == 'show'){
elem.show();
}
if($(this).data('elem-status') == 'hide'){
elem.hide();
}
console.log('An element was toggled!');
});
});
これが私のHTMLソースです：
<table align="center" width="100%" cellspacing="1" cellpadding="5" border="0">
<tr>
<td align="center" colspan="2" class="row1"><h1>Article Info</h1></td>
</tr><tr>
<td align="right" width="30%" class="row2"><label>Article Title</label></td>
<td align="left" width="70%" class="row2"><input type="text" name="title" size="30" class="text-input" value="Max: The Curse of Brotherhood Review"></td>
</tr><tr>
<td align="right" width="30%" class="row2"><label>Category</label></td>
<td align="left" width="70%" class="row2"><select name="category_id">
<option value="1" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Base Command News</option>
<option value="4" rel="toggleElement" data-elem-id="platforms" data-elem-status="show">Gaming Articles</option>
<option value="8" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Resources</option>
<option value="2" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Staff Intel</option>
<option value="7" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Tutorials</option>
<option value="10" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Clan Websites</option>
<option value="9" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Game Servers</option>
</select></td>
</tr><tr class="platforms">
<td align="right" width="30%" class="row2"><label>Platform(s)</label></td>
<td align="left" width="70%" class="row2">Nintendo <input type="checkbox" name="platforms[]" value="3" /> PC <input type="checkbox" name="platforms[]" value="4" /> PlayStation <input type="checkbox" name="platforms[]" value="2" /> Xbox <input type="checkbox" name="platforms[]" value="1" /> </td>
</tr>
PS：特定のオプションは表示するだけで、他のオプションは非表示にするだけなので、toggle（）は使いたくありません。
TIA！
これは、「変更」イベントを使用して実行できます
$(document).ready(function () {
$('.platforms').hide();
$(document).on('change', 'select[name="category_id"]', function () {
var $selectedOption = $(this).find("option:selected");
var elem = $selectedOption.data('elem-id');
elem = $('.' + elem);
if ($selectedOption.data('elem-status') == 'show') {
elem.show();
}
if ($selectedOption.data('elem-status') == 'hide') {
elem.hide();
}
console.log('An element was toggled!');
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加