Question

好吧，我已经经历了很多来源，但我很困惑地应用它们。我是javascript和jquery的新手。我有一步一步的选择（我有一个向导模板）。因此，当我选中“婚礼”单选按钮时，我想显示上一步/ div中的文本字段。

我的HTML代码：

<div id="step-1"> 
  <fieldset> 
    <input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="see()" />
    <input type="radio" id="theme2" name="cake_theme" value="bday" onchange="see()" />
    <input type="radio" id="theme3" name="cake_theme" value="occassion" onchange="see()" /> 
  </fieldset> 
</div>

<div id="step-2">
  Date: <input type="date" name="date_pick"/> //remains
  <div class="wed_delivery"> Venue : <input type="text" name="wed_delivery" placeholder="Venue to Delivery"/> //only shows up when "wedding button" is checked 
  </div> 
</div>   
<div id="themedisplay" height="100px" width="300px"> </div>

我在我的JS中有不同的文件:(工作正常）

function see(){
  var canvas = document.getElementById('displaycake');
  if (document.getElementById('theme1').checked) {
    document.getElementById('themedisplay').innerHTML = "Wedding Cake";
  }
  if (document.getElementById('theme2').checked) {
    document.getElementById('themedisplay').innerHTML = "Birthday Cake";
  }
  if (document.getElementById('theme3').checked) {
    document.getElementById('themedisplay').innerHTML = "Occassion Cake";
  }
}

我尝试将div放在div“step-1”

之下

<script>
  $(document).ready(function () {
  $(".wed_delivery").hide();
  $("#theme1").click(function () { //theme1 is the Wedding Theme
    $(".wed_delivery").show();
  }); 
</script>

它不起作用，是否可以在向导模板中？在此先感谢，评论每一行都很受欢迎。

Answer 1

这会对你有所帮助。请注意。

1：正确关闭document.ready功能。

2：如果不包含JQuery，则包括JQuery。

3：使用单选按钮绑定事件，如果选中的收音机是/不是婚礼单选按钮，则隐藏/显示文本框

＆＃13;

<DockPanel Grid.Row="0" Grid.Column="8" Height="25">
     <Menu DockPanel.Dock="Top" Height="25" Width="100">
          <MenuItem Header="calender" Height="25" Width="100" >
               <Calendar Name="CalenderSelect"
                    SelectionMode="MultipleRange" 
                    SelectedDatesChanged="Calendar_OnSelectedDatesChanged"
                    Width="192">
               </Calendar>
          </MenuItem>
     </Menu>
</DockPanel>

＆＃13;

function see(){
 var canvas = document.getElementById('displaycake');
 if (document.getElementById('theme1').checked) {
        document.getElementById('themedisplay').innerHTML = "Wedding Cake";}

    if (document.getElementById('theme2').checked) {
        document.getElementById('themedisplay').innerHTML = "Birthday Cake";}

    if (document.getElementById('theme3').checked) {
        document.getElementById('themedisplay').innerHTML = "Occassion Cake";}
 }

＆＃13;

Answer 2

建立2个类来表示off和on的状态，并最初为.off类分配文本框。触发change事件后，请使用.addClass()和.removeClass() jQuery方法。

要解释OP的变化太多，所以我在片段中评论了细节：

段

/* Shorthand for $(document).ready(function() { */
$(function() {
  /* change event triggered by any radio button */
  $(':radio').on('change', function() {
    /* $(this) is the function owner, 
    |  in this case it is the specific 
    |  radio button being changed 
    */
    // Get radio value
    var title = $(this).val();
    // Get radio data-img
    var img = $(this).data('img');
    // Get url of background-image
    var path = 'http://imgh.us/' + img;
    // Set text of figcaption
    $('#themeTitle').text(title);
    // Set background-image of figure
    $('#themeDisplay').css('background', 'url(' + path + ')no-repeat');
    // if the checked radio id is 'theme1'...
    if ($(this).attr('id') === 'theme1') {
      //...status of textbox is on...
      $('.wedDelivery').addClass('on').removeClass('off');
    } else {
      //...otherwise status of textbox is off
      $('.wedDelivery').removeClass('on').addClass('off');
    }
  });
});

.off {
  display: none;
}
.on {
  display: inline-block;
}
#themeDisplay {
  width: 300px;
  height: 100px;
}
#themeTitle {
  font: 700 16px/1.4 cursive;
  color: black;
  background: rgba(255, 255, 255, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset id='step1'>
  <legend>Event Themes</legend>
   <!--data-img represents the image file name can be manipulated by .attr() or .data()-->
  <label>Wedding
    <input type="radio" id="theme1" name="cakeTheme" value="Wedding" data-img='wedcake.jpg'>
  </label>
  <label>Birthday
    <input type="radio" id="theme2" name="cakeTheme" value="Birthday" data-img='bdaycake.jpg'>
  </label>
  <label>Special Occasion
    <input type="radio" id="theme3" name="cakeTheme" value="Special Occasion" data-img='speccake.jpg'>
  </label>
</fieldset>


<fieldset id="step2">
  <legend>Pick-up/Delivery</legend>
  <label>Date:
    <input type="date" name="datePick">
  </label>
  <label class='wedDelivery off'>Venue :
    <input type="text" name="wedDelivery" placeholder="Venue to Delivery">
  </label>
</fieldset>
<figure id="themeDisplay">
  <figcaption id='themeTitle'></figcaption>
</figure>

在收音机检查时显示其他div中的文本字段

2 个答案:

段