0

我有以下正常工作的 JQuery 函数：

$(function () {
    $('#accmenu').change(function() {
        $(".insightsgraphs div").hide();
        $(".insightsoptions input").removeClass("green");
        $("#newLikes").one('click', function () {
            $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    var json = response.replace(/"/g,'');
                    json = "[" + json + "]";
                    json = json.replace(/'/g,'"');
                    var myData = JSON.parse(json);
                    var myChart = new JSChart('dailyNewLikes', 'line');
                    myChart.setDataArray(myData);
                    myChart.setAxisNameX('');
                    myChart.setAxisNameY('');
                    myChart.setAxisValuesColorX('#FFFFFF');
                    myChart.setSize(470, 235);
                    myChart.setTitle('Daily New Likes');
                    myChart.draw();
                }});
            return false;
        });
        $("#unlikes").one('click', function () {
            $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    $("#dailyUnlikes").html(response);
                }});
            return false;
        });
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
        return false;
    });
    $("#unlikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyUnlikes').toggle();
        return false;
    });
});

但我想创建一个条件：如果以下两个日期输入之一：

var since = $('#dateoptions input[name="since_date"]').val();
var until = $('#dateoptions input[name="until_date"]').val();

为空我希望收到警报，并且.one()仅在满足条件时才执行该功能。例如，当我在没有输入日期的情况下单击其中一个按钮时，我想收到一个警报alert("One of the date or both missing")，例如，在我选择日期并再次按下按钮以执行.one()上述示例中的功能。我希望我让自己足够清楚。我知道我可以使用类似的东西：

if (until == "" || since == "") {
    alert("One of the date or both missing")
} else {}

但到目前为止我的尝试没有成功。可能我没有将条件放在应该的位置......此外，还可以通过警报将输入集中、突出显示或类似的东西？

编辑：这是一个小提琴：http: //jsfiddle.net/DanielaVaduva/ueA7R/6/ 我用其他东西替换ajax调用而不修改流程。

4

2 回答 2

1

尝试使用以下方法检查您的值：

if (until.trim().length === 0 || since.trim().length === 0) {
    //TODO here
}

我建议您检查name输入中的属性，并检查它是否与您在检索输入值时使用的相同。

如果它仍然无法正常工作，请尝试一些“调试”，例如：

console.log(since);

并检查它是否正确地获得了您的价值。

更新

我不知道你是否想要这个（演示）。如果您的日期为空，它将无法正常工作。AJAX 调用在 JsFiddle 上不起作用，因为您使用的是 a.serialize()并且它通过 URL 发送信息，作为GET类型，您需要将其发送为POST. 没关系。如果您已经准备好服务器以接收GET方法，那么它将起作用。

另外，我必须补充一点，如果您只想在 AJAX 成功的情况下更改颜色，您必须添加我在演示中使用的更改颜色功能，并且如果您想在每次向服务器发送信息时检查您的日期，将.one()函数更改为.on()函数并在 AJAX 成功后删除函数：

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

（有关在此处删除功能的更多信息）；

我希望这将至少对您想要的方式有所帮助。如果不是您想要的，请发表评论。

于 2013-05-13T13:19:34.593 回答
1

我不确定我是否完全理解了这个问题，但是..你可以检查一下>>

小提琴演示

HTML

将 ID 添加到日期字段，例如

 <input id="until" type="date" name="until_date" value="Until date">
 <input id="since" type="date" name="since_date" value="Since date">

只是为了突出显示所需的日期>>

CSS

.req{
   border:2px red solid;
}
.required{
   color:red;
   font-size: 0.8em;
   font-style:italic;
}

jQuery

$(function () {
     //removing the highlighting class on change
      $('#until').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });
      $('#since').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });

    $('#accmenu').change(function() {
      var dSince= $('#since').val();
      var dUntil= $('#until').val();
      if(dSince=='' || dUntil==''){
         alert('You MUST select Both dates!');
         $(this).val(0); // Set the menu to the default 
         //Adding the Highlight and focus
         if(dSince==''){
             $('#since').addClass('req').after('<span class="required">- required *</span>').focus();}
         if(dUntil==''){
             $('#until').addClass('req').after('<span class="required">- required *</span>').focus();}           
      }else{
         $(".insightsgraphs div").hide();
         $(".insightsoptions input").removeClass("green");
         $("#newLikes").one('click', function () {
             $("#dailyNewLikes").html('</p>Test daily new likes</p>');
             return false;
          });
         $("#unlikes").one('click', function () {
              $("#dailyUnlikes").html('</p>Test daily unlikes</p>');
             return false;
         });
       }  //End of the if statement
   });
   $("#newLikes").on('click', function(){
      $(this).toggleClass('green');
      $('#dailyNewLikes').toggle();
      return false;
   });
   $("#unlikes").on('click', function(){
         $(this).toggleClass('green');
      $('#dailyUnlikes').toggle();
      return false;
   });

});

因此，无论何时选择 s 中的一个选项accmenu，它都会检查两个DATEs 的值，如果两者或任何一个为空，它就不会执行该函数。

于 2013-05-13T15:20:39.203 回答