11

<a>そのため、タグによってアクティブ化されたスライダーを介して基本的にコンテンツを切り替えるjQueryを少し実装しました。今考えてみると、リンクを保持している DIV をリンク自体にする必要があります。

私が使用しているjQueryは私の頭の中に座っています：

<script type="text/javascript">
function slideonlyone(thechosenone) {
 $('.systems_detail').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
</script>

これをインデックス タイプのボックスとして使用していたので、以前は画像だったタグをクリックすると、いくつかの製品が<a>表示されます*。その下に、製品の詳細を説明するコンテンツが少し表示されます。

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

製品の詳細はこの div に含まれています。

<div class="systems_detail" id="sms_box">
</div>

そのため、以前は画像だった*をクリックすると、slideonlyone('div_id_name') 関数が実行されます。上記の関数は、最初に「system details」というクラス名を持つ他のすべての div を閉じてから、slideonlyone 関数に渡された ID を持つ div を開く/スライドさせます。そうすれば、製品の詳細を切り替えることができ、一度にすべてを表示する必要はありません.

<a>私はそこに何があったかを示すためにタグを保持しただけであることに注意してください。私はそれを取り除きます.

注：div全体を<a>タグでラップするだけのアイデアがありましたが、それは良い習慣ですか？

だから今私が疑問に思っているのは、divタグでonclickを実行するにはJavaScriptが必要なので、私のslideonlyone関数を引き続き実行するようにどのように書くのですか?

4

4 に答える 4

23

例のように控えめなJavaScript（つまりインラインコード）を使用すると、次のような属性を持つ要素にクリックイベントハンドラーをアタッチできますdiv。onclick

 <div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
     ...
 </div>

ただし、ベストプラクティスは控えめなJavaScripton()であり、jQueryのメソッドまたはその省略形を使用して簡単に実現できますclick()。例えば：

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

ハンドラー関数内（この場合など）で、イベントをトリガーslideonlyone()した要素（この場合など）をオブジェクトで参照できます。たとえば、IDが必要な場合は、でアクセスできます。div$(this)$(this).attr('id')

編集

以下の@fmsfへのコメントを読んだ後、切り替えるターゲット要素を動的に参照する必要があることもわかりました。@fmsfが示唆しているdivように、次のようなデータ属性を使用して、この情報をに追加できます。

<div id="some-id" class="some-class" data-target="sms_box">
    ...
</div>

要素のデータ属性にアクセスするにはattr()、@ fmsfの例のようにメソッドを使用できますが、ベストプラクティスは、次のようにjQueryのdata()メソッドを使用することです。

 function slideonlyone() {
     var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
     var target_id  = $(this).data('target'); // This would be 'sms_box'
     ...
 }

プレフィックスなしで、を使用してdata-targetアクセスする方法に注意してください。data-attributesを使用すると、あらゆる種類の情報を要素に添付でき、jQueryはそれらを要素のデータオブジェクトに自動的に追加します。data('target')data-

于 2013-01-28T09:14:38.333 に答える
7

なぜそれを HTML に添付する必要があるのですか? ホバーで関数をバインドするだけです

$("div.system_box").hover(function(){ mousin }, 
                          function() { mouseout });

どうしても html 内に JS 参照が必要な場合は、通常は悪い考えですが、次を使用できます。

onmouseover="yourJavaScriptCode()"

トピック編集後:

<div class="system_box" data-target="sms_box">

...

$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
于 2013-01-28T08:19:12.677 に答える
0

mouseenterイベントとイベントをバインドすることができmouseleave、jQuery はネイティブではないイベントをエミュレートします。

$("div.system_box").on('mouseenter', function(){
    //enter
})
.on('mouseleave', function(){
    //leave
});

フィドル

注: ホバーは非推奨であるため、使用しないでください

于 2013-01-28T08:32:46.077 に答える
0

ここで改善できることがいくつかあります。まず<a>、リンクがないので (アンカー) タグを使用する理由はありません。

すべての要素はクリックおよびホバー イベントにバインドできます... div、スパン、ラベル、入力など。

しかし、あなたが何をしようとしているのか、私にはよくわかりません。あなたは目標を独自の実装と混ぜ合わせていますが、これまで見てきたことから、それを行う方法がよくわかりません。あなたが達成しようとしていることをよりよく説明できますか?

==編集==

要件はまだ非常に曖昧です。私はあなたが言っていると想像していることの非常に簡単なバージョンを実装しました...またはあなたがそれをどのように行うことができるかを示す何かに近い. 私が正しい軌道に乗っているかどうかを教えてくれました。

http://jsfiddle.net/THEtheChad/j9Ump/

于 2013-01-28T08:35:08.410 に答える