Question

我需要显示用户可以在哪一天以及上午，下午或晚上的天气。

每个用户每次都获得一系列值：

早上：阵列（星期一，星期二，星期五）下午：array（）//不可用晚上：阵列（THRS）

现在我的任务是，将3或4个字母的单词转换为1个字母，并为字体添加绿色。

默认情况下，它显示一周中灰色的所有日期。用户可用的日期将标记为绿色。

我的剧本：

我将每个阵列传递给早晨，下午和晚上，以便在ajax成功功能中运行。

         if(globalStore.data[i].morning!=""){

        splitThis_morn(globalStore.data[i].morning);

        }else if(globalStore.data[i].afternoon !="")
        {
                   splitThis_aft(globalStore.data[i].afternoon,globalStore.data[i].UUID);

        }else if(globalStore.data[i].evening !="")
        {

        splitThis_eve(globalStore.data[i].evening,globalStore.data[i].UUID);

        }

function splitThis_morn(param)//this is to split 
{
    var days = param.split(',');//
   // how to do the rest of the work here?

}
function splitThis_aft(param)//this is to split 
{
    var days = param.split(',');//
   // how to do the rest of the work here?

}
function splitThis_eve(param)//this is to split 
{
    var days = param.split(',');//
   // how to do the rest of the work here?

}

HTML（默认情况下，天数的1个字母单词显示为灰色）

<div class='small-6 medium-6 large-6 columns text-left morning'>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>

基于Onheiron的回答编辑回答

在ajax成功中传递到这样的功能：

if(globalStore.data[i].morning!=""){
    splitThis_morn(globalStore.data[i].morning);
    }else if(globalStore.data[i].afternoon !="")
    {
    splitThis_aft(globalStore.data[i].afternoon);
    }else if(globalStore.data[i].evening !="")
    {
    splitThis_eve(globalStore.data[i].evening);
    }

功能：

  function splitThis_morn(param)
    {
        var days = param.split(',');

        var morning = days;

    for(d in morning){
        var day = morning[d]
        $('.morning > .'+day.toLowerCase()).addClass('green')
    }
    }


    function splitThis_aft(param)
    {
        var days = param.split(',');

        var afternoon = days;

    for(d in afternoon){
        var day = afternoon[d]
        $('.afternoon > .'+day.toLowerCase()).addClass('green')
    }


    }
    function splitThis_eve(param)
    {
        var days = param.split(',');


        var evening = days;

        for(d in evening){
        var day = evening[d]
        $('.evening > .'+day.toLowerCase()).addClass('green')
    }


    }

基于Sahil的编辑回答

activateDays(globalStore.data[i].morning, "morning", globalStore.data[i].UUID);

功能

function activateDays(activeOn, time, divId){
        activeOn = activeOn.join(',').split(',');
      //assuming that the span tags for morning,afternoon, evening are inside a div with an unique id.
      $('#'+divId +' .'+time+' span').removeClass('active');
       for(i=0;i<activeOn.length;i++){
           var element = days.indexOf(activeOn[i])+1;
           $('#'+divId +' .'+time+' span:nth-child('+element+')').addClass('active');
       }
    }

在ajax成功函数中通过jquery追加的HTML：

<div class='small-12 medium-12 large-12 columns text-left'> Availability:</div><div  id="+globalStore.data[i].UUID+" class='small-6 medium-6 large-6 columns text-left morning days'>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 id="+globalStore.data[i].UUID+"  class='small-6 medium-6 large-6 columns text-left afternoon days'>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 id="+globalStore.data[i].UUID+"  class='small-6 medium-6 large-6 columns text-left evening days'>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>

Answer 1

如果我得到了你想做的事，这应该可以正常工作：

将字符串转换为数组
对于每个数组中的每一天，请在右侧div中选择正确的子项
给那些孩子一个绿色

因此，如果您的HTML看起来像这样：

<div class='small-6 medium-6 large-6 columns text-left morning'>
 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='small-6 medium-6 large-6 columns text-left afternoon'>
 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='small-6 medium-6 large-6 columns text-left evening'>
 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>

然后你可以使用一些不错的jQuery选择器来选择正确列表中的正确子项：

for(d in morning){
    var day = morning[d]
    if(day.length > 0){
        $('.morning > .'+day.toLowerCase()).addClass('green')
    }
}

注意day.toLowerCase()会将Mon转换为mon，这是您的范围的正确类名。

Here a working fiddle for you.

Answer 2

你可以这样做：

＆＃13;

$(document).ready(function(){
var days = ["Mon","Tue","Wed","Thur","Fri","Sat","Sun"];

function activateDays(data, time){
    
  $('.'+time+' span').removeClass('active');
   for(i=0;i<data.length;i++){
       var element = days.indexOf(data[i])+1;
       $('.'+time+' span:nth-child('+element+')').addClass('active');
   }
}
	activateDays(["Mon","Wed"],"morning");
    activateDays(["Mon","Thur","Sat"],"afternoon");
    activateDays(["Mon","Thur","Sun","Fri"],"evening");
    });

＆＃13;

.days{
  background: #333;
  width: auto;
  color: #999;
  float:left;
  margin-left: 10px;
  padding: 2px;
  border-radius: 3px;
}
.active{
  color:turquoise;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="morning days">
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  <span>S</span>
  <span>S</span>
</div>
<div class="afternoon days">
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  <span>S</span>
  <span>S</span>
</div>
<div class="evening days">
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  <span>S</span>
  <span>S</span>
</div>

＆＃13;

<强>更新对每个用户来说都更容易，对于你拥有span标签的每个div，你肯定会有 id 。所以你可以从ajax调用的成功事件内部调用这样的函数：

$(document).ready(function(){
//Do not change this variable's format, this is used below for comparison, just change the spellings of the days if needed.
var days = ["Mon","Tue","Wed","Thrs","Fri","Sat","Sun"];
//example ajax call:
$.ajax({
url: 'example.com',
success: function(data){
//I am assuming data is "Mon,Wed"
 activateDays(data, "morning", divId);
},
error: function(data){
//handle error
}
});
    function activateDays(activeOn, time, divClass){
        activeOn = activeOn.split(',');
      //assuming that the span tags for morning,afternoon, evening are inside a div with an unique id.
      $('.'+divClass +'.'+time+' span').removeClass('active');
       for(i=0;i<activeOn.length;i++){
           var element = days.indexOf(activeOn[i])+1;
           $('.'+divClass +'.'+time+' span:nth-child('+element+')').addClass('active');
       }
    }

  });

如何按时间标记选定的日期

2 个答案: