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提交按鈕類更改

回答

相關問題