5

私は新しくjQueryとjavaスクリプトを学んでいますが、現在、隠しボタンを表示する際に問題に直面しています.htmlは

<span style="float:left;padding-right:10px">
    <input type="button" value="image" class="delete" />
    <a href="/media/image"><img src="/media/image" /></a>
</span>
<span style="float: left; padding-top: 5px;">
    <a href="/media/image">
        <button  type="submit" class="delete_media">Delete</button>
    </a>
</span>

Jクエリ:

$(".delete").click(function(){         
 var $this = $(this);   
 $this.siblings(".delete_media").toggle();             
});

CSS:

.delete_media {    
    display:none;
    float: right;
    height: 25px;
    width: 60px;
    -moz-border-radius: 10px;
    border-radius:10px;    
}

また、find、nextAll、closestを使用してみましたが、何も機能しなかったので、これを機能させる方法。

デモHere

4

2 に答える 2

2

これを試して

 $this.closest('span').next().find(".delete_media").toggle();

デモ

于 2013-09-06T07:44:46.200 に答える
1

兄弟を使用していますが、それらは同じコンテナー上にありません。これらの 2 つのボタンには共通のコンテナーがないため、他のトラバース関数も同様に機能しません。

クラスごとに検索してみよう

$(".delete").click(function(){         
   var $this = $(this);   
   $(".delete_media").toggle();             
});

これら 2 つのボタンを共通のコンテナーでラップすることをお勧めします。

これが例です

<div data-action="delete">
    <span style="float:left;padding-right:10px">
        <input type="button" value="image" class="delete" />
        <a href="/media/image"><img src="/media/image" /></a>
    </span>
    <span style="float: left; padding-top: 5px;">
        <a href="/media/image">
            <button  type="submit" class="delete_media">Delete</button>
        </a>
    </span>
</div>

$(".delete").click(function(){         
   var $this = $(this);   
   $this.closest("div[data-action='delete']")
                          .find(".delete_media").toggle();             
});
于 2013-09-06T07:44:35.067 に答える