マウスオーバーで週のハイライトが正しく機能しない

Question

私のプロジェクトではfullCalendarを使用しています。最初の列は週で、残りの列は日です）

jsfiddle

1、以下のフィドルをご覧ください。

2）週の列には乱数が表示されました。日数を考慮しないでください。

3）その週の番号にマウスオーバーすると、その週の金曜日が次の木曜日にハイライトされます（合計7日間）。

私の予想は以下のとおりです。

1）ときは週「TD」の私は、マウスオーバー、それは1つのツールチップが表示されます。

2）私は週の乱数にマウスを置くと、木曜日に金曜日を強調表示していません。

3）私は、乱数と特定の「td」にマウスを重ねると、金曜日の木曜日を強調表示する必要があります。私がマウスを "td"に置くと、そのハイライトを隠す必要があるだけです。

var weekRandom; 
 
\t var dayRandom; 
 
\t 
 
\t \t var eventsArray = [ 
 
\t \t ]; 
 

 
\t \t var dayNames = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 
 
\t \t \t \t 'Thursday', 'Friday', 'Saturday' ]; 
 

 
\t \t $('#calendar').fullCalendar(
 
\t \t \t \t { 
 
\t \t \t \t \t editable : true, 
 
\t \t \t \t \t weekNumbers : true, 
 
\t \t \t \t \t allDaySlot : true, 
 
\t \t \t \t \t weekNumberTitle : 'week', 
 
\t \t \t \t \t eventLimit : true, // allow "more" link when too many events 
 
\t \t \t \t \t selectable : true, 
 
\t \t \t \t \t dayNamesShort : dayNames, 
 
\t \t \t \t \t eventLimit : 1, 
 
\t \t \t \t \t events : eventsArray, 
 
\t \t \t \t \t cc_monthPrev : 0, 
 
\t \t \t \t \t cc_monthNext : 2, 
 

 
\t \t \t \t \t columnFormat : { 
 
\t \t \t \t \t \t month : 'dddd', // Monday, Wednesday, etc 
 
\t \t \t \t \t \t week : 'dddd, MMM dS', // Monday 9/7 
 
\t \t \t \t \t \t day : 'dddd, MMM dS' // Monday 9/7 
 
\t \t \t \t \t }, 
 

 
\t \t \t \t \t eventRender : function(event, element) { 
 

 
\t \t \t \t \t \t var html = "<div style='float:right'>" + 'welcome' 
 
\t \t \t \t \t \t \t \t + "</div>" + "</div>"; 
 
\t \t \t \t \t \t element.append(html); 
 
\t \t \t \t \t } 
 

 
\t \t \t \t }); 
 

 
\t \t $("td.fc-day.fc-widget-content") 
 
\t \t \t \t .each(
 
\t \t \t \t \t \t function(index) { 
 
\t \t \t \t \t \t \t var random = Math.floor(Math.random() * 100); 
 
\t \t \t \t \t \t \t dayRandom = $(this) 
 
\t \t \t \t \t \t \t \t \t .append(
 
\t \t \t \t \t \t \t \t \t \t \t "</br><span style='font-size: 30px;font-weight: 600;color: green;'>" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + random 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + "%</span></br><span>99,998</span><span>/</span><span style='font-weight:100'>99,999</span>"); 
 
\t \t \t \t \t \t }); 
 
\t \t $("td.fc-week-number.fc-widget-content").prepend(
 
\t \t \t \t "<span class='weekFormat' style='float:left'>WK</span>"); 
 

 
\t \t 
 
\t \t $("td.fc-week-number.fc-widget-content") 
 
\t \t .each(
 
\t \t \t \t function(index) { 
 
\t \t \t \t \t var random = Math.floor(Math.random() * 100); 
 
\t \t \t \t \t weekRandom = $(this) 
 
\t \t \t \t \t \t \t .append(
 
\t \t \t \t \t \t \t \t \t "<span class='weekNo' style='font-size: 20px;font-weight: 600;color: orange;'>" 
 
\t \t \t \t \t \t \t \t \t \t \t + random 
 
\t \t \t \t \t \t \t \t \t \t \t + "%</span>"); 
 
\t \t \t \t \t 
 
\t \t \t }); 
 
\t \t 
 
\t \t 
 
\t \t $("td.fc-week-number.fc-widget-content").find('.weekNo').each(function(){ 
 
\t \t \t $(this).on('mouseover',function(){ 
 
\t \t \t \t var weekNo = $(this).text(); 
 
\t \t \t \t var weekNoCustm = weekNo.replace(/[^0-9]/g, ""); 
 
\t \t \t \t console.log('weekNoCustm------'+weekNoCustm); 
 
\t \t \t \t if(weekNoCustm>0){ 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').siblings('.fc-fri').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').siblings('.fc-sat').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').addClass('weekHilt'); 
 
\t \t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').addClass('weekHilt'); 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t \t $(this).on('mouseleave',function(){ 
 
\t \t \t \t $(this).parent('.fc-week-number ').siblings('.fc-fri').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').siblings('.fc-sat').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-mon').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-tue').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-wed').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-thu').removeClass('weekHilt'); 
 
\t \t \t \t $(this).parent('.fc-week-number ').closest('.fc-week').next('tr').find('.fc-sun').removeClass('weekHilt'); 
 
\t \t \t }) 
 
\t \t }); 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t 
 
\t \t \t \t \t \t 
 
\t \t $(".fc-toolbar").css("display", "none"); 
 

 
\t \t $(".fc-widget-content") 
 
\t \t \t \t .on(
 
\t \t \t \t \t \t 'mouseover', 
 
\t \t \t \t \t \t function() { 
 

 
\t \t \t \t \t \t \t $('#cal-info').addClass('hide'); 
 
\t \t \t \t \t \t \t var data = $(this).html(); 
 
\t \t \t \t \t \t \t var offset = $(this).offset(); 
 
\t \t \t \t \t \t \t $('#cal-info').css('left', offset.left); 
 
\t \t \t \t \t \t \t $('#cal-info').css('top', (offset.top - 40)); 
 
\t \t \t \t \t \t \t $('#cal-info') 
 
\t \t \t \t \t \t \t \t \t .html(
 
\t \t \t \t \t \t \t \t \t \t \t '<span class="zoomBy">Zoom By:</span>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '</br></br>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '<a href="dayResort.html" id="utilizationResortId" target="_blank">Resort</a>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '</br>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '<a href="dayResort.html" id="utilizationBrandId" target="_blank">Brand</a>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '</br>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '<a href="dayResort.html" id="utilizationRepoId" target="_blank">Repository</a>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '</br>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '<a href="dayResort.html" id="utilizationConsumerId" target="_blank">Consumer Type</a>'); 
 

 
\t \t \t \t \t \t \t //p.html("left: " + offset.left + ", top: " + offset.top); 
 
\t \t \t \t \t \t \t $('#cal-info').removeClass('hide'); 
 
\t \t \t \t \t \t }); 
 
\t \t $(".fc-week-number").on('mouseover', function() { 
 

 
\t \t \t //$('#cal-info').addClass('hide'); 
 
\t \t }); 
 
\t \t $(".row").on('mouseleave', function() { 
 

 
\t \t \t $('#cal-info').addClass('hide'); 
 

 
\t \t });

body { 
 
\t margin-top: 40px; 
 
\t text-align: center; 
 
\t font-size: 13px; 
 
\t font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
 
} 
 
.tag{ 
 
    background-color:grey; 
 
    color:#fff; 
 
    margin-left:0px; 
 
    margin-top:8px !important; 
 
    padding:3px; 
 
    max-height:90px; 
 
    overflow: visible; 
 
    position: fixed; 
 
    z-index:999; 
 
} 
 
.tag:after { 
 
    content: ""; 
 
    border-top: 16px solid red; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    left: calc(50% - 10px); 
 
} 
 

 
#calendar { 
 
\t width: 900px; 
 
\t margin: 0 auto; 
 
} 
 
.weekHilt{ 
 
\t background: #1c90f3 !important; 
 
}

Start Date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""> 
 
End date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br> 
 

 
<div id='calendar'></div> 
 
<div class="tag hide" id="cal-info">

私はこれを行うことができますどのように私を助けてください..

Answer 1

をマイトこれはあなたの問題

$("#calendar").on("mouseover", "tr.fc-week", function() { 
    $(this).addClass("active"); 
}); 
$("#calendar").on("mouseout", "tr.fc-week", function() { 
    $("#calendar tr.fc-week").removeClass("active"); 
}); 

を解決し、このCSSを追加：

tr.active > td:not(:first-child) { 
    background-color: red; 
} 

を210

フィドル：http://jsfiddle.net/8ohxvz2o/1/