PHP HTML JQUERY提交按钮类更改

我有这个小表单，它可以用作过滤器。我只需要发送值到URL和值显示激活按钮。形式是工作PHP HTML JQUERY提交按钮类更改

<form id="filter" method="get" action=""> 
<label>View: 
<input type="submit" id="men" class="active" name="men" value="men" /> 
<input type="submit" id="women" class="normal" name="women" value="women" /> 
</label> 
</Form>

但是，当涉及到改变的类，它不工作有2类（正常=正常，激活=高亮）

$('#men').click(function() { 
     $('#women').removeClass('active'); 
     $('#women').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
return false; 
}); 

$('#women').click(function() { 
     $('#men').removeClass('active'); 
     $('#men').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
return false; 
});

没有jQuery的，按一下按钮的变化网址

使用JQUERY - toogle作品，但不会更改网址这可以如何解决？谢谢！

来源

2014-02-14 kaulainais

你可以发布JSFiddle吗？使用CSS –

http://jsfiddle.net/acT9G/ – MamaWalter

您可以通过在其中放置警报（'click'）或console.log（'click'）来验证事件侦听器是否实际被调用？是否有可能在页面上有ID为“men”或“women”的其他对象？ – bwroga

不知道你试图达到什么样的，但这项工作：

$('#men').click(function(evt) { 
    evt.preventDefault(); 
    if($(this).hasClass('normal')){ 
     $(this).toggleClass('normal active'); 
     $('#women').toggleClass('normal active'); 
    } 
}); 

$('#women').click(function(evt) { 
     evt.preventDefault(); // this will prevent submitting your form 
    if($(this).hasClass('normal')){ 
     $('#men').toggleClass('normal active'); 
     $(this).toggleClass('normal active'); 
    } 
});

FIDDLE

编辑：也许我错了，但根据你的评论似乎需要重新加载页面才能得到表单提交的结果。那么为什么不在PHP中使用你的class开关呢？

<?php 
    $menBtnClass = 'normal'; 
    $womenBtnClass = 'normal'; 

    if(isset($_GET['men']) && $_GET['men'] === 'men') $menBtnClass = 'active'; 
    if(isset($_GET['women']) && $_GET['women'] === 'women') $womenBtnClass = 'active'; 
?> 
<form id="filter" method="get" action=""> 
    <label>View: 
    <input type="submit" id="men" class="<?php echo $menBtnClass; ?>" name="men" value="men" /> 
    <input type="submit" id="women" class="<?php echo $womenBtnClass; ?>" name="women" value="women" /> 
    </label> 
</form>

来源

2014-02-14 15:22:57 MamaWalter

Toogle作品，它改变了课程。但它不会更改$ GET值 – kaulainais

确定您应该编辑您的问题并添加您的PHP代码。我认为你不需要JavaScript来实现你的尝试。只需检查你的'$ _GET'值并在PHP中添加'class'。 – MamaWalter

我做到了。用PHP。正确，不需要JavaScript – kaulainais

试试这个。

$('#men').click(function() { 
     $(this).toggleClass('normal active'); 
     $('#women').toggleClass('normal active'); 

return false; 
}); 

$('#women').click(function() { 
     $('#men').toggleClass('normal active'); 
     $(this).toggleClass('normal active'); 
return false; 
});

toggleClass是最有效的https://api.jquery.com/toggleClass/

来源

2014-02-14 15:11:03 Netzach

什么是不工作？

这里的小提琴http://jsfiddle.net/X8EqK/

似乎为我

$('#men').click(function() { 
     $('#women').removeClass('active'); 
     $('#women').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
     return false; 
}); 

$('#women').click(function() { 
     $('#men').removeClass('active'); 
     $('#men').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
     return false; 
});

来源

2014-02-14 15:11:59 comrade

怎么了工作？它的工作在我的测试：fiddle

$('#men').click(function() { 
    $('#women').removeClass('active').addClass('normal'); 
    $(this).removeClass('normal').addClass('active'); 
    return false; 
}); 

$('#women').click(function() { 
    $('#men').removeClass('active').addClass('normal'); 
    $(this).removeClass('normal').addClass('active'); 
    return false; 
});

来源

2014-02-14 15:14:22 doku

JSFiddle工作以及在这里。我只是稍微推敲了一下代码。

$(function() { 

    $('#men').click(function(e) { 
     e.preventDefault(); 
     $('#women').removeClass('active').addClass('normal'); 
     $(this).removeClass('normal').addClass('active'); 
    }); 

    $('#women').click(function(e) { 
     e.preventDefault(); 
     $('#men').removeClass('active').addClass('normal'); 
     $(this).removeClass('normal').addClass('active'); 
    }); 

});

来源

2014-02-14 15:19:19 lshettyl

PHP HTML JQUERY提交按钮类更改

回答

相关问题