0

では、この記事のシナリオがあるとしましょう。左に写真があり、画像のすぐ後に記事の内容があります。コンテンツエリアに予約ボタンがあります。記事が予約されている場合は、写真の下に小さな画像が表示されます (「予約済み」と書かれた透明な文字)。これで作業は完了です。

次にやりたいことは、ハイパーリンク ボタン「予約する」を記事から削除することです (予約済みの場合)。次のようになります。

  1. -NormalIMG- 【予約ボタン】
  2. -NormalIMG- 【予約ボタン】
  3. -ReservedIMG- *
  4. -NormalIMG- 【予約ボタン】
  5. -ReservedIMG- *
  6. -NormalIMG- [予約ボタン]など。※予約ボタンはありません

つまり、次のようなものです。 

<!-- reserved article -->
 <div class="article">
  <div class="image"></div>
  <div class="image-reserved"><img src="reserved.jpg" /></div>
   <div class="content">
     <a href="#" class="reserveLink">Reserve</a>
   </div>
 </div>
<!-- reserved article //-->

<!-- unreserved article -->
<div class="article">
 <div class="image"></div>
 <div class="image-reserved"></div>
  <div class="content">
   <a href="#" class="reserveLink">Reserve</a>
  </div>
</div>
<!-- unreserved article //-->

<!-- reserved article -->
 <div class="article">
  <div class="image"></div>
  <div class="image-reserved"><img src="reserved.jpg" /></div>
   <div class="content">
     <a href="#" class="reserveLink">Reserve</a>
   </div>
 </div>
<!-- reserved article //-->

私は次のようなjQueryで試しました：

if(!($('.image-reserved').find(img))) {
    $('.reserveLink').addCSS('display', 'none');
}

しかし、すべての「予約」リンクが削除されました...

要素「img」が見つかった後にのみ、その CSS 属性を適用する必要があることに気付きました。その後、検索を続行し、必要に応じて適用する必要があります。

上記の例に似たさまざまな構造 (find、has、next などを使用) を実装することで、この問題から抜け出す方法を見つけようとして一日中無駄になりましたが、成功しませんでした。

私は最後の手段としてここに投稿しています。私の希望は、実装がとても簡単に思えたものに完全に失われています...

重要な注意: 構造が奇妙に見え、実装するのが非常に難しいことはわかっていますが、既に記述されているコードを変更することは許可されていません。

4

4 に答える 4

0

$('.image-reserved').next().hide()

于 2013-08-05T18:04:49.903 に答える
0

私はお勧めします：

$('.content').filter(function(){
    return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();

JS フィドルのデモ。

参考文献:

于 2013-08-05T18:05:07.420 に答える
0

$('div.image-reserved:not(:empty)+.content a.reserveLink').image-reservedコンテンツを持つすべての div を検索し、それらの後の要素.reserveLink内のリンクを選択します。.content

于 2013-08-05T18:14:45.293 に答える