2

行のデータ属性と、クリック時に同じデータ属性を持つ div を表示する機能を備えたテーブルを作成しようとしています。jquery関数をより簡単/スマートにする場合は、さらにデータ属性を追加できます。

すべてをうまくプレイするには、いくつかの助けが必要です:)

前もって感謝します！

編集: jsFiddle リンク: http://jsfiddle.net/MXpnQ/

$(".productRow").click(function () {
 $(this).parent().hide("slow"); //hides the fundListContainer
 --function to show the correct fundInfoContainer--?
});

$(".backToCorrectListButton").click(function () {
 --function to hide the fundInfoContainer and show the correct fundListContainer--?
});

<div class="fundListContainer">
<table>
 <tr class="productRow" data-fundId="1">
  <td></td>
  <td></td>
 </tr>
 <tr class="productRow" data-fundId="2">
  <td></td>
  <td></td>
 </tr>
</table>
</div>

<div class="fundInfoContainer" data-fundId="1" style="display: none">
 <div class="backToCorrectListButton">back to list</div>
</div>

<div class="fundInfoContainer" data-fundId="2" style="display: none">
 <div class="backToCorrectListButton">back to list</div>
</div>
4

1 に答える 1

3

できますよ！

$(".productRow").click(function () {
   $(this).parent().hide("slow"); //hides the fundListContainer
   $("[data-fundId="+$(this).data('fundId')+"]").hide();
});

属性 (data-attr かどうか) のいずれかで要素を選択する場合は、表記法を使用します。

$("[属性名=値]")

http://api.jquery.com/attribute-equals-selector/を参照してください。

編集：これがあなたが望むものかどうか見てください

http://jsfiddle.net/MXpnQ/3/

于 2011-10-16T16:30:54.940 に答える