1

次の HTML コードがあり、クラス editfield と editfieldlink リンクで div を非表示にし、クラス値で div を表示したいと考えています。次のjQueryコードを試してみましたが、うまくいきませんでしたが、次のステートメントのように親を非表示にするとうまくいきます:$(this).closest('div.editfield').parent().hide();

<tr class="row-fluid settingsrow">
                <td class="span2">
                    <strong>Name</strong>
                </td>
                
                <td class="span8">
                <div class="value">ALI ASAD</div>
                <div class="editfield">
                    <form class="form-vertical">         
                        <div class="control-group">
                            <label class="control-label">First Name</label>
                            <div class="controls">
                                <input type="text" name="firstname" id="firstname" placeholder="Ali">
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Last Name</label>
                            <div class="controls">
                                <input type="text" name="lastname" placeholder="Asad">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button type="submit" class="btn btn-primary btn-mini">Save Changes</button>
                                <button class="btn btn-inverse btn-mini cancelactionsettings">Cancel</button>
                            </div>
                        </div>
                    </form> 
                </div>
                </td>
                <td class="span1"><a href="#" class="editfieldlink" style="text-decoration:none"><small>Edit</small></a></td>
            </tr>

そして、私のJavaScriptは次のようなものです:

$(document).ready(function(e) 
    {
    $('#settingseditor .cancelactionsettings').click(function(event)
    {
        event.preventDefault();

        $(this).closest('div.editfield').hide();
        $(this).closest('div.value').show();
        $(this).closest('a.editfieldlink').hide();
        
    });
    
});
4

4 に答える 4

1

親（）を試してください。

$('#settingseditor .cancelactionsettings').click(function(event)
{
  event.preventDefault();

  $(this).parents('div.editfield').hide();
  $(this).parents('div.editfield').prev().show();
  $(this).parents('td.span8').next().find('a.editfieldlink');

});

注：私はあなたのコードで見つけられませんでした#settingseditor....場合に、マルチセレクターを使用しようとしている場合、,そこで演算子を忘れました...

$('#settingseditor , .cancelactionsettings').click(...
 //---------------^^^^--- here
于 2013-03-20T13:58:57.720 に答える
1

正しくトラバースしていないだけです

$(document).ready(function (e) {
    $('#settingseditor .cancelactionsettings').click(function (event) {
        event.preventDefault();
        $(this).closest('div.editfield').hide();
        $(this).closest('div.editfield').prev('.value').show(); // .value is a prev sibling of div.editfield
        $(this).closest('td').next().find('a.editfieldlink').hide();// anchor is in the next sibling td
    });
});

フィドル

于 2013-03-20T14:09:46.437 に答える
0

ID を持つ要素がどこにあるのかわかりませんが、要素だけ#settingseditorを探している場合はうまくいきます.cancelactionsettings

$('#settingseditor, .cancelactionsettings').click(function(event)
{
   ...
}

jsフィドル

于 2013-03-20T13:59:33.257 に答える
0

あなたのセレクターは要素と一致しません。$('#settingseditor .cancelactionsettings')これを に変更し$('.cancelactionsettings')ます。

実際の例については、このフィドルを参照してください

于 2013-03-20T14:00:18.497 に答える