我有一些适用于IE，Chrome和Firefox的jquery，但不适用于Safari。如果用户单击该按钮，则如果单击的按钮没有所述类，则调用toggleClass。这是Fiddle
这是HTML
<form id="quoteform" action="confirm_plan_options.php" method="post" name="quoteform">
<div id="deduct_term_holder">
<h3 class="fs-subtitle">Deductibles</h3>
<input name="disappearing" value="Disappearing" class="deductible" id="deductible0" type="button">
<input style="display: none;" name="zero" value="$0" class="deductible" id="deductible1" type="button">
<input name="fifty" value="$50" class="deductible" id="deductible2" type="button">
<input name="onehundred" value="$100" class="deductible uiButton" id="deductible3" type="button">
<input name="two-hundred" value="$200" class="deductible" id="deductible4" type="button">
<br>
<h3 class="fs-subtitle">Term Years</h3>
<input name="1-year" value="1 years" class="term-years" id="1_year_term" type="button">
<input name="2-year" value="2 years" class="term-years uiButton" id="2_year_term" type="button">
<input name="3-year" value="3 years" class="term-years" id="3_year_term" type="button">
<input name="4-year" value="4 years" class="term-years" id="4_year_term" type="button">
<input name="5-year" value="5 years" class="term-years" id="5_year_term" type="button">
<input style="display: none;" name="6-year" value="6 years" class="term-years" id="6_year_term" type="button">
<input style="display: none;" name="7-year" value="7 years" class="term-years" id="7_year_term" type="button">
<input style="display: none;" name="8-year" value="8 years" class="term-years" id="8_year_term" type="button">
</div>
<div id="plansdiv" style="width:100%">
<table id="plans">
<caption>Ford Extended Service Care Plans
<br>Click on price to select.</caption>
<tbody>
<tr>
<td>Term Miles</td>
<td>End Year</td>
<td>PremiumCare</td>
<td>ExtraCare</td>
<td>BaseCare</td>
<td>PowertrainCare</td>
</tr>
<tr>
<td class="term_miles">12,000</td>
<td>2018</td>
<td>
<input name="PremiumCare_plan" value="$4,200" class="plan-price" type="submit">
</td>
<td>
<input name="ExtraCare_plan" value="$3,540" class="plan-price" type="submit">
</td>
<td>
<input name="BaseCare_plan" value="$3,135" class="plan-price" type="submit">
</td>
<td>
<input name="PowertrainCare_plan" value="$2,715" class="plan-price" type="submit">
</td>
</tr>
<tr>
<td class="term_miles">18,000</td>
<td>2018</td>
<td>
<input name="PremiumCare_plan" value="$4,255" class="plan-price" type="submit">
</td>
<td>
<input name="ExtraCare_plan" value="$3,730" class="plan-price" type="submit">
</td>
<td>
<input name="BaseCare_plan" value="$3,295" class="plan-price" type="submit">
</td>
<td>
<input name="PowertrainCare_plan" value="$2,820" class="plan-price" type="submit">
</td>
</tr>
<tr>
<td class="term_miles">24,000</td>
<td>2018</td>
<td>
<input name="PremiumCare_plan" value="$4,410" class="plan-price" type="submit">
</td>
<td>
<input name="ExtraCare_plan" value="$3,860" class="plan-price" type="submit">
</td>
<td>
<input name="BaseCare_plan" value="$3,400" class="plan-price" type="submit">
</td>
<td>
<input name="PowertrainCare_plan" value="$2,900" class="plan-price" type="submit">
</td>
</tr>
<tr>
<td class="term_miles">36,000</td>
<td>2018</td>
<td>N/A</td>
<td>
<input name="ExtraCare_plan" value="$4,125" class="plan-price" type="submit">
</td>
<td>
<input name="BaseCare_plan" value="$3,855" class="plan-price" type="submit">
</td>
<td>
<input name="PowertrainCare_plan" value="$3,240" class="plan-price" type="submit">
</td>
</tr>
<tr>
<td class="term_miles">48,000</td>
<td>2018</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td class="term_miles">60,000</td>
<td>2018</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td class="term_miles">75,000</td>
<td>2018</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<br>
<input name="plan_type" value="used" type="hidden">
</div>
<input type="button" id="to-vehicle-info" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</form>
的CSS
button.term-years,
button.deductible {
border: 1px solid black;
border-radius: 2px;
background-color: #27AE60;
padding: 5px 10px;
}
input.term-years,
input.deductible {
border: 1px solid black;
border-radius: 2px;
background-color: #27AE60;
padding: 5px 5px;
}
input.uiButton {
color: red!important;
background-color: #000;
}
input.deductible:hover,
input.term-years:hover,
input.plan-price:hover {
color: red !important;
box-shadow: 0 0 0 2px white, 0 0 0 3px red;
background-color: #000;
}
.plan-price {
background-color: #27AE60;
padding: 2px;
}
#plans caption {
text-align: center;
}
#plans {
margin: 0 auto;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
font-size: .8em;
color: #808080;
width: 90%;
}
#plans table,
td {
border: 1px solid #ccc;
}
#plans td {
padding: 5px;
}
#plans tbody tr:nth-child(even) {
background: WhiteSmoke;
}
和Jquery
$('.deductible').click(function(e) {
var termstr = '';
var deductstr = '';
factory_warranty = $('input[name=factory_warranty]:checked').val();
snowplow = $('input[name=snowplow]:checked').val();
usage = $('input[name=usage]:checked').val();
milestr = $('#current_milage').val();
turbo = $('input[name=turbo]:checked').val();
purchase_date = $('input[name=purchase_date]:checked').val();
$('.deductible').each(function() {
if ($(this).is(":focus") && !$(this).hasClass('uiButton') && !$('.deductible').hasClass('uiButton')) {
$(this).toggleClass('uiButton');
} else if ($(this).hasClass('uiButton') && $(this).is(':focus')) {
e.preventDefault();
} else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && !$('.term-years').hasClass('uiButton') && $(this).is(':focus')) {
$(this).toggleClass('uiButton');
} else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && $('.term-years').hasClass('uiButton') && $(this).is(':focus') && $('.deductible').hasClass('uiButton')) {
$('.deductible').removeClass('uiButton');
$(this).toggleClass('uiButton');
}
});
$('.term-years').each(function(i) {
if ($('#' + i + '_year_term').hasClass('uiButton')) {
termstr = $('#' + i + '_year_term').val();
}
});
$('.deductible').each(function(i) {
if ($('#deductible' + i).hasClass('uiButton')) {
deductstr = $('#deductible' + i).val();
if (deductstr.indexOf('$') > -1) {
deductstr = deductstr.replace(/\D/g, '');
}
}
});
//alert('plan code is' + plan_code);
get_plan_pricing(plan_type, plan_code, termstr, deductstr, milestr, factory_warranty, snowplow, usage, turbo, purchase_date);
});
$('.term-years').click(function() {
var str = $(this).val();
milestr = $('#current_milage').val();
var deductstr = '';
factory_warranty = $('input[name=factory_warranty]:checked').val();
snowplow = $('input[name=snowplow]:checked').val();
usage = $('input[name=usage]:checked').val();
milestr = $('#current_milage').val();
turbo = $('input[name=turbo]:checked').val();
purchase_date = $('input[name=purchase_date]:checked').val();
$('.term-years').each(function() {
if ($(this).is(":focus") && !$(this).hasClass('uiButton') && !$('.term-years').hasClass('uiButton')) {
$(this).toggleClass('uiButton');
} else if ($(this).is(":focus") && !$(this).hasClass('uiButton') && $('.term-years').hasClass('uiButton')) {
$('.term-years').removeClass('uiButton');
$(this).toggleClass('uiButton');
}
});
$('.deductible').each(function(i) {
if ($('#deductible' + i).hasClass('uiButton')) {
deductstr = $('#deductible' + i).val();
if (deductstr === 'Disappearing') {
return;
} else {
deductstr = deductstr.replace(/\D/g, '');
}
}
});
//alert('plan code is ' + plan_code);
get_plan_pricing(plan_type, plan_code, str, deductstr, milestr, factory_warranty, snowplow, usage, turbo, purchase_date);
});
$('.plan-price').click(function(e) {
if ($('.next').prop('disabled', true)) {
$('.next').prop('disabled', false);
}
if ($(this).is(':focus') && !$(this).hasClass('uiButton') && !$('.plan-price').hasClass('uiButton')) {
$(this).toggleClass('uiButton');
} else if ($('.plan-price').hasClass('uiButton') && $(this).is(':focus') && !$(this).hasClass('uiButton')) {
$('.plan-price').removeClass('uiButton');
$(this).toggleClass('uiButton');
}
//alert($(this).val());
e.preventDefault();
});
答案 0 :(得分：0)
我终于设法使用
让它工作了if(!$(e.target).hasClass('uiButton') && !$('.plan-price').hasClass('uiButton')){
$(e.target).toggleClass('uiButton');
}
else if($('.plan-price').hasClass('uiButton') && $(e.target) && !$(e.target).hasClass('uiButton')){
$('.plan-price').removeClass('uiButton');
$(e.target).toggleClass('uiButton');
}