在实际脚本上尝试时出现问题,但不起作用

Fiddle when tried on real script not working

本文关键字:问题 不起作用 脚本      更新时间:2023-09-26

这是我的工作小提琴:https://jsfiddle.net/axpbe377/7/

我在下面的脚本中应用了相同的概念,但它并没有像在小提琴中那样为匹配的span的文本着色。当我检查这些值是否传递给colorMe()时,他们确实注销了这个:

LOgs

user= 5684a03cd15fd
show_all_tutors.js:394 morning= Wed
show_all_tutors.js:395 afternoon= Wed
show_all_tutors.js:396 evening= Wed
show_all_tutors.js:393 user= 5684acabd818b
show_all_tutors.js:394 morning= Thrs
show_all_tutors.js:395 afternoon= Thrs
show_all_tutors.js:396 evening= Thrs
show_all_tutors.js:393 user= 5684aec47a4fd
show_all_tutors.js:394 morning= Wed
show_all_tutors.js:395 afternoon= Wed
show_all_tutors.js:396 evening= 
show_all_tutors.js:393 user= 5684afd9c5967
show_all_tutors.js:394 morning= Wed,Thrs
show_all_tutors.js:395 afternoon= 
show_all_tutors.js:396 evening=  
......................................
.......................................
$(function()
{
    var data;
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "/search/show_all_tutors.php", 
    data: data,
    success: function(data) {
        data.forEach(function(user){
    colorMe(user.morning, user.afternoon, user.evening, user.UUID);
        $("#contents").append("<div>"+user.UUID+"</div><div class='morning_"+user.UUID+"'>Morning: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div><div class='afternoon_"+user.UUID+"'>Afternoon: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div><div class='evening_"+user.UUID+"'>Evening: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div>");

    });//end forEach
    }
  });

});

这是colorMe()函数。

function colorMe(param, param2, param3, user_id){
    console.log("user= "+user_id);
    console.log("morning= "+param);
    console.log("afternoon= "+param2);
    console.log("evening= "+param3);
    var mornings = param.split(',');
    var afternoons = param2.split(',');
    var evenings = param3.split(',');
    $("div.morning_"+ user_id +" span").filter(function(){
        return mornings.indexOf(this.className) > -1;
    }).css('color', '#26F525');
    $("div.afternoon_"+ user_id +" span").filter(function(){
        return afternoons.indexOf(this.className) > -1;
    }).css('color', '#26F525');
    $("div.evening_"+ user_id +" span").filter(function(){
      return evenings.indexOf(this.className) > -1;
    }).css('color', '#26F525');
}

/search/show_all_tutors.php中的json格式数据如下:

[{"UUID":"5678f6c0b54da","morning":"","afternoon":"Thrs,Fri,Sat,Sun","evening":"Thrs,Fri,Sat,Sun"},{"UUID":"5678f6ef9fee1","morning":"Wed,Thrs","afternoon":"Wed,Thrs","evening":""}]

尝试

$(function(){
    var data;
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "/search/show_all_tutors.php", 
    data: data,
    success: function(data) {
        data.forEach(function(user){
           $("#contents").append("<div>"+user.UUID+"</div><div class='morning_"+user.UUID+"'>Morning: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div><div class='afternoon_"+user.UUID+"'>Afternoon: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div><div class='evening_"+user.UUID+"'>Evening: <span class='Mon'>M</span><span class='Tue'>T</span><span class='Wed'>W</span><span class='Thrs'>T</span><span class='Fri'>F</span><span class='Sat'>S</span><span class='Sun'>S</span></div>");  
           colorMe(user.morning, user.afternoon, user.evening, user.UUID);
        });//end forEach
});