Question

我的课程有图像

<a class="proceed-btn right" onclick="validateall();" style="cursor: pointer;">Proceed To Next Step >>></a>

这是什么CSS

.proceed-btn {
  background:url("images/proceed-btn.gif") no-repeat scroll 0 0 transparent;
  height:35px;
  width:275px;
}

然后在同一页面上我有这些输入字段和链接

<input type="text" id="name" name="name" value="" class="field left">
<input type="text" id="company" name="company" value="" class="field left">
<input type="text" id="email" name="email" value="" class="field left">

<a onclick="setindustry('3');" style="cursor: pointer;" class="industry_links highlight">Retail</a>

<a onclick="setsystems('5');" style="cursor: pointer;" class="count_links highlight">5</a>

我希望在满足以下所有条件时使顶部按钮具有.new_button类

.new_button { background-position: 0 -35px; text-decoration: none; color: #fff; }

每个文本字段至少有一个字母，而industry_links和count_links类至少有一个具有突出显示类的类

基本上我想在满足所有五个时改变按钮的颜色

对不起它这么混乱

Answer 1

var allHaveAtleastOneLetter = true;
$("input[type='text']").each(function(){ allHaveAtleastOneLetter && ($(this).val().length > 0 )});

var industryLinksHasHighlight = $(".industry_links.highlight").length > 0;

var countLinksHasHighlight = $(".count_links.highlight").length > 0;

if(allHaveAtleastOneLetter && industryLinksHasHighlight && countLinksHasHighlight){
   $("proceed-btn.right").addClass("new_button");
}

Answer 2

好的，我已经选择了我认为最具可读性的方法这是：

if($('#name').val().length>0 && 
   $('#company').val().length>0 && 
   $('#email').val().length>0 &&
   $('.industry_links.highlight').length > 0 &&
   $('.count_links.highlight').length > 0
  ) {
   // Of course you could make #FF0000 any colour you want
   $('.proceed-btn.right').css('color', '#FF0000');
}

Answer 3

在您检查的那些按钮上使用css函数进行测试：

$('.buttonsClass').each(function(){

if(this.css('text-decoration') == 'none'
   && ... )
 this.addClass('new_button');
});

不确定我的语法是否正确，但使用firebug它应该很容易实现。

Answer 4

在伪jquery中，因此它作为一般模式更具可读性：

$(elements you are looking for).change(function() {
    if(condition A &&
      condition B &&
      . 
      .
      .
      condition Z)
     {
        $(element you want to change).addClass('class you want to add');
     }
});

您可以监听任何元素的变化，测试是否满足所有条件，然后应用更改。

Answer 5

你做错了。

如果是我，我会使用验证工具包（如此http://bassistance.de/jquery-plugins/jquery-plugin-validation/） - 如果表单通过验证，请使用“addClass”为您的按钮添加一个类来更改按钮的颜色。

如果表单验证失败，请删除该类（并禁用该按钮？）。

我如何在jQuery中处理if条件

5 个答案: