Помогите с JavaScript, чтобы скрыть переключатели - PullRequest
Новая
       42

Помогите с JavaScript, чтобы скрыть переключатели

0 голосов
/ 15 сентября 2010

Я получил этот код здесь недавно 

<script type='text/javascript'>
 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });
</script>

Цель состоит в том, чтобы скрыть раскрывающийся список в зависимости от того, были ли выбраны переключатели да и нет. Вот мой код: 

<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="Yes" value="Yes" />Yes
  <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  
     <select class="purple" name="discountselection" id="discountselection">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>

Я поместил javascript между тегами head, но по какой-то причине это просто не работает для меня. Я не знаком с JavaScript вообще. Если кто-нибудь может увидеть, где я иду не так, это было бы большой помощью. Спасибо.

Ответы [ 4 ]

2 голосов
/ 15 сентября 2010

ваш код в порядке, вам просто нужно обернуть его готовым обработчиком.

вот так, 

$(function() {
    $('#discountselection').hide();

    $('#No').click(function() {
        $('#discountselection').hide();
    });

    $('#Yes').click(function() {
        $('#discountselection').show();
    });
});​

Вы также можете сократить свои коды, как это, 

$(function() {
    $('#discountselection').hide();
    $('#Yes, #No').click(function() {
        $('#discountselection').toggle(this.value==='Yes');
    });
});​
1 голос
/ 15 сентября 2010

Если вам не нужен jQuery, вот один из способов сделать это 

<script type="text/javascript">
function showDiscount(show) {
  document.getElementById('discountselection').style.display=(show)?'block':'none';
}
window.onload=function() {
  showDiscount(document.getElementById('discountYes').checked);
}
</script>
<table>
<tr>
<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="discountYes" value="Yes" onclick="showDiscount(this.checked)"/>Yes
  <input name="discount" type="radio" id="discountNo" value="No" checked="checked" onclick="showDiscount(!this.checked)"/>No<br />  
     <select class="purple" name="discountselection" id="discountselection" style="display:none">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>
</tr>
</table>
0 голосов
/ 15 сентября 2010

Используемый вами синтаксис $() - это синтаксис jQuery, а не простой Javascript.JQuery - это библиотека Javascript, которая добавляет дополнительные функциональные возможности по сравнению с обычным JS.Если вы используете этот синтаксис, вам нужно будет включить библиотеку JQuery.

То, чего вы пытаетесь достичь, относительно просто, даже без JQuery, но код будет выглядеть совершенно иначе, если вы неНе планируйте использовать JQuery.

Если вы планируете использовать JQuery, ваш код должен быть помещен в блок готовности docuemnt, чтобы он правильно инициализировался.

0 голосов
/ 15 сентября 2010

Код прекрасно работает для меня.

Если это не работает для вас, попробуйте пару вещей:

  • убедитесь, что jQuery включен правильно и работает
  • поместите код обработки событий в любое место после разметки с этими элементами
...