1

次のようなマークアップのあるアイテムのリストがあります。

<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-283 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-290 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-290 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-300 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>
<article class="day past">
  <div class="schedule schedule-261 event">
    <h4>Title</h4>
    <p>Lorem ipsum...</p>
  </div>
</article>

クラスは、データベース内のschedule-NUMBERアイテムのIDに基づいて割り当てられます。基本的に、これは繰り返しイベントがあるカレンダーからのマークアップであるため、一部のイベントは同じデータベースレコードを共有します。

アイテムが「繰り返し」である場合（つまり、複数のdivがschedule-261存在する場合）、すべてのdivのホバーイン/アウトで追加のクラスを追加/削除したいと思いschedule-261ます。アイテムが「繰り返されていない」場合（つまり、divが1つしかない場合schedule-283）、ホバーに追加のクラスは適用されません。

jQueryはこの特定のプロジェクトに最適なライブラリであるため、jQueryソリューションが推奨されます。

ありがとう！

4

4 に答える 4

2 
$(".schedule").each(function() {
    var cls = (this.className.match(/schedule-\d+/) || []).pop();
    if (cls.length === 0) return;

    var els = $(".schedule." + cls);
    if (els.not(this).length > 0) {
        els.hover(function() {
            els.addClass("someClass");
        }, function() {
            els.removeClass("someClass");
        });
    }
});

デモ: http://jsfiddle.net/DSYpA/

于 2013-01-28T19:56:45.540 に答える
1 
$('article .schedule').on('mouseover', function () {

    var s = $(this); 
    if(s.size()>1) {
       s.addClass('myHoverClass');
    }

});
于 2013-01-28T19:54:29.923 に答える
0

"schedule-[Number]" クラスを見つけて、スタイリング クラスを追加します。

$(".schedule").on("someevent", function(){
    var className = this.className;
    var classes = className.split(" ");
    for(var i=0;i<classes.length;i++)
    {
        var cls = classes[i];
        if (cls.indexOf("schedule") != -1 && cls.replace("schedule").length !== 0 && $("." + cls).length > 1)
        {
              $("." + cls).addClass("whatever");
        }
    }
});
于 2013-01-28T19:49:42.080 に答える
0 
$('.schedule').each(function()
{
   var s=this.className.split(/\s+/).filter(function(w){return /schedule-\d+/.test(w);});
   if (s && $('.' + s).length > 1) $('.' + s).addClass('yourclass');  
});
于 2013-01-28T20:05:43.530 に答える