2

基本的な調査を行っていますが、質問の 1 つは、はい/いいえの質問です。ユーザーが「いいえ」を選択した場合、質問の下にテキストエリアを表示して、ユーザーが「いいえ」の理由を説明できるようにしたいと思います。[はい] をクリックすると、テキスト ボックスは非表示のままになります ([いいえ] をクリックして表示した場合は非表示になります)。

これが私の HTML のスニペットです (はい、書式設定にテーブルを使用しています :-) 。この場合、時間を節約できます）。はい/いいえの質問が 4 つあります。これはそのうちの 1 つにすぎません。それらの唯一の違いは、id 名 ( #explain1、#explain2、#explain3、#explain4)です。

<tr id="yesno1">
    <!-- yes/no1 choices --> <!-- Yes(1) No(0) -->
    <td class="center"><input name="yn1" value="1" id="yes1" type="radio"></td>
    <td class="center"><input name="yn1" value="0" id="no1" type="radio"></td>

    <!-- yes/no1 question -->
    <td class="question">
        Did you meet your goals during this program? (If no, explain.)
    </td>
</tr>

<tr class="explain-box" id="explain1">
    <td></td>
    <td></td>
    <td class="explain-text">
      <textarea name="explain1" placeholder="Please explain..."></textarea>
    </td>
</tr>

そして、ここに私のjQueryがあります。これは質問1で機能します：

$(function() {
    $('.explain-box').hide();

    $('#no1').click(function() {
        $('#explain1').show();
    });

    $('#yes1').click(function() {
        $('#explain1').hide();
    });
});

私は javascript と jquery についてかなり曖昧なので、すべての yes/no 質問のすべての ID の条件を入力せずに jquery コードを機能させるにはどうすればよいですか? なんとか使えることはわかっているのですthisが、どうすればいいのかわかりません。この場合に使用する関数のアイデアを誰かが提供できますか? 質問は 4 つしかないので、箇条書きで各質問の条件を入力するだけでよいでしょうか。

4

3 に答える 3

5

startwithselectorを使用してみてください。

$(function() {
    $('.explain-box').hide();

    $('[id^=no]').click(function() {
        $(this).parents("tr").next(".explain-box").show();
    });

    $('[id^=yes]').click(function() {
        $(this).parents("tr").next(".explain-box").hide();
    });
});
于 2013-03-21T14:51:18.650 に答える
1

IDだけでなく、チェックボックスにyesまたはnoクラスを指定できます。次に、この構文を使用して、それに関連付けられているテキストエリアを見つけることができます。次のようなもの：

$(function() {
    $('.explain-box').hide();

    $('.no').click(function() {
        $(this).parents("tr").next().find('.explain-box').show();
    });

    $('.yes').click(function() {
        $(this).parents("tr").next().find('.explain-box').hide();
    });
});

編集

textareaを切り替える1つの関数を作成することで、これをさらに単純化することもできます。

$(function() {
    $('.explain-box').hide();

    $('.checkbox').click(function() {
        var show = $(this).val() == "0";
        $(this).parents("tr").next().find('.explain-box').toggle(show);
    });
});
于 2013-03-21T14:49:53.973 に答える
0

テーブルやスイッチを使わずに、これを行う方法を次に示します。

$('input:radio').on('change', function(){
    // compare against string value of input
    if ($(this).val() === '0')  {  
        // show textarea closest to $(this) 
        $(this).closest('div').find('textarea').show();
    }
});

デモ

于 2013-03-21T15:57:27.660 に答える