javascript - Jquery 不适用于 Safari

Question

我有一些适用于 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();
});

Answer 1

我终于设法使用它来工作

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');
}

我在 stack overflow 上找到的