1

この問題を解決するために、あなたの助けを求めたいと思います。その div 内のリンクをクリックすると、div 内の詳細が表示されます。ただし、1 ページに 50 以上の div があります。各 div とクリック可能なリンクに ID を指定できません。これを達成できるものはありますか？

これが私が試したことです。

<script type="text/javascript">
  $(document).ready (function(){
    $('#clk').click(function(e){
      $('.1').css({'height':'500px', 'background-color': '#ffbbbb'} );
      $(this).hide ();
      e.preventDefault();
    });
  });
</script>

clk はクリック可能なリンクの ID です。.1 は div のクラスです。

前述のように、私が行ったことによると、50 個の ID と 50 個のクラスを使用する必要があります。

その部分のHTMLはこちら

<div class="1">
    <ul>
    <li><img src="images/thumb/someimage.jpg"></li>
    <li><h2>Title Text </h2></li>
    <li><h3>Summary</h3></li>
    <li><p> para goes here. <a class="clk" href="#">Click</a></p>
    </li></ul>

</div>

この問題を解決するのを手伝ってください。

どうもありがとう。

4

2 に答える 2

2

すべてに対して個別のクラスと ID を用意する必要はありません。これらの 50 個のアイテムすべてに、何が保持されているかを説明する共通のクラスを追加します。次に、次のようにアプローチします。

$('.common-class a').on('click', function(e){
  e.preventDefault();
  $(this).closest('.common-class').find('.more').slideToggle();
});

は、クリックしたリンク内の div.find('.more')のみを検索します。.more.common-class

ここに簡単なデモがあります: http://jsbin.com/alijak/1/edit

于 2013-07-21T15:19:07.227 に答える
1

ものを見つけるために ID を使用する必要はありません。それが唯一の方法ではありません。物事を相対的にします。などを使用してclosest、nextクリッカーからシャワーを見つけます。(HTML 構造も示していただけるとより良い回答となります。)

編集：さて、ついにあなたが言っていたことがわかりました。読解力は私の部分で失敗します。では、まず、名前を適切なものに変更しましょう.1。たとえば... .expandable:

<div class="expandable">
  <ul>
  <li><img src="images/thumb/someimage.jpg"></li>
  <li><h2>Title Text </h2></li>
  <li><h3>Summary</h3></li>
  <li><p> para goes here. <a class="clk" href="#">Click</a></p>
  </li></ul>
</div>

あなたがすることができます：

$('.clk').click(function() {
  e.preventDefault();
  $(this).closest('.expandable').css({'height':'500px', 'background-color': '#ffbbbb'} );
  $(this).hide();
  e.preventDefault();
});

そのため.closest、現在の要素から上に移動し、一致する最も近い祖先を見つけます。このようにして、ID や 50 個のクラス名を必要とせずに.expandable、それぞれから適切なものを取得できます。.clk

ただし、ほとんどの状況では、固定 500 よりも自動高さの方が優れているでしょう。

于 2013-07-21T15:15:32.157 に答える