0

一連のテキスト ボックスとドロップ ダウンがあり、ユーザーはこれらに入力し、「生成」をクリックすると、テキスト ボックス内の文字列が連結され、結果の値がページに表示されます。

私が問題を抱えているのは、ユーザーが再び生成した場合にこれらの「出力」をクリアすることです。たとえば、誰かがテキストなどを変更した場合などです。

複数の行に複数のテキストボックスのグループがあり、結果の文字列は<span>ページの最後に配置されます。以下のサンプルコード:

HTML:

 <div id="activitytag">
      <h3>Activity Tags</h3>
      <a class="addActivityTag button blue">+</a> <a class="removeActivityTag button blue">-</a> 

  <form id="tag-form" class="tag-form">
  <input type="checkbox" class="checkbox nounderscore" name="tfcheck">
    <select class="page_type" title="Page Type">
      <option value="HPG">HPG – Homepage</option>
      <option value="LPG">LPG – Landing Page</option>
      <option value="CNT">CNT – Content</option>
      <option value="RES">RES – Research</option>
      <option value="ENG">ENG – Engagement</option>
      <option value="CNV">CNV – Sale Conversion</option>
    </select>
    <input type="text" class="pagedesc nounderscore" value="Page Description" title="Page Description" onfocus="clickclear(this, 'Page Description')" onblur="clickrecall(this,'Page Description')" />
    <input type="text" class="tagstartdate numberinput" value="Tag Start Date" title="Tag Start Date" maxlength="8" onfocus="clickclear(this, 'Tag Start Date')" onblur="clickrecall(this,'Tag Start Date')" />
    <span class="tag_span"></span>
  </form>
</div>

<div class="dfanames">
    <h4>Activity Group</h4>
    <span id="activitytaggrouptext"></span> 
</div>

jQuery:

$(document).ready(function() {
    $('.gp').click(generateOutputs);
});

function clearAll() {
    $('.tag_span').each(function() {
        $('.tag_span').html("");
    });
}

上記の jQuery からわかるように、each()(複数の行が存在する可能性があるため) 関数を使用してスパンをクリアしようとしましたが、これは機能しません。この投稿で私が意味を成していることを願っています。人々がこれを理解していない場合は、よりよく説明しようとします。

ありがとう

4

4 に答える 4

2

リセットボタンを使ってみる

     <input type="reset"/>

それ以外の場合、コードでこれを実行しようとしている場合は、次のようにします。

function clear_form_elements(ele) {

    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });

}


 clear_form_elements('#tag-form');

http://www.electrictoolbox.com/jquery-clear-form/

于 2012-05-02T15:05:28.800 に答える
1

これを試してください...ここで行ったことは、ボタンの入力をフォーム内に配置し、タイプをリセットするように設定することでした。これにより、フォームの属性にコードを配置してonreset、現在のフォーム（ボタンを含む）のスパンをクリアすることができました。

HTML

<div id="activitytag">
      <h3>Activity Tags</h3>
      <a class="addActivityTag button blue">+</a> <a class="removeActivityTag button blue">-</a> 

  <form id="tag-form" class="tag-form" onreset="clearAll()">
  <input type="checkbox" class="checkbox nounderscore" name="tfcheck">
    <select class="page_type" title="Page Type">
      <option value="HPG">HPG – Homepage</option>
      <option value="LPG">LPG – Landing Page</option>
      <option value="CNT">CNT – Content</option>
      <option value="RES">RES – Research</option>
      <option value="ENG">ENG – Engagement</option>
      <option value="CNV">CNV – Sale Conversion</option>
    </select>
    <input type="text" class="pagedesc nounderscore" value="Page Description" title="Page Description" onfocus="clickclear(this, 'Page Description')" onblur="clickrecall(this,'Page Description')" />
    <input type="text" class="tagstartdate numberinput" value="Tag Start Date" title="Tag Start Date" maxlength="8" onfocus="clickclear(this, 'Tag Start Date')" onblur="clickrecall(this,'Tag Start Date')" />
    <span class="tag_span">123</span>
    <input type="reset" value="ClearButton" />
  </form>
</div>

<div class="dfanames">
    <h4>Activity Group</h4>
    <span id="activitytaggrouptext"></span> 
</div>

JavaScript

function clearAll() {
    $(".tag_span").each(function(index,element) {
        element.innerHTML="";
    });
}​

実例を参照してください：http：//jsfiddle.net/VF2qG/2/

于 2012-05-02T15:32:36.267 に答える
0

複数の .tag_span がない場合は、次のようにします

$('.tag_span').empty()

要素内のものは削除されますが、dom から要素は削除されません

于 2012-05-02T15:18:08.970 に答える
0

これが私が思いついたものです：http://jsfiddle.net/Y2JRJ/

$(this)tag_span を再度参照する代わりに、参照する必要がありました。

$('.tag_span').each(function() {
    $(this).html("");
});
于 2012-05-02T15:11:34.247 に答える