Question

我写了以下脚本，但我无法找出它为什么不能正常工作。这个想法是当你检查一个单选按钮来获得它的值，该值等于一个类的名称。之后隐藏（）当前窗口并显示类名称等于单选按钮值的元素：

＆＃13;

var userChoice;
var currentQuest;

	$(document).ready(function() {

	    $('input[type=radio][name=question]').change(function() {

	    	userChoice = $('input[name=question]:checked').val();
	    	currentQuest = $('.container-quest').attr('id');

	    	$(currentQuest).hide();
	    	$(userChoice).show(500);
	    });
	});

＆＃13;

#b1-l11-q3,
#b1-l11-q4 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="b1-l10-q2" class="container-quest">
  <div class="step-container">
    <p>
      Choose one of these!
    </p>
    <form>
      <input type="radio" name="question" value="b1-l11-q3">Div - 1<br />
      <input type="radio" name="question" value="b1-l11-q4">Div - 2
    </form>
  </div>
</div><!-- end -->

<div id="b1-l11-q3"> Div 1 </div>
<div id="b1-l11-q4"> Div 2 </div>

＆＃13;

Answer 1

您需要添加#

$(document).ready(function() {

        $('input[type=radio][name=question]').change(function() {

            userChoice = $('input[name=question]:checked').val();
            currentQuest = $('.container-quest').attr('id');
            $('#'+currentQuest).hide(); // <<<<<<<<  add # 
            $('#'+userChoice).show(500); // <<<<<<<< add #
        });
    });

Simple Example解释使用#与使用#之间的差异

正如评论中提到的@DinoMyte所以你可以使用

$(document).ready(function() {  
     $('input[type=radio][name=question]').change(function() {
        userChoice = $(this).val();
        currentQuest = $(this).closest('.container-quest');
        currentQuest.hide();
        $('#'+userChoice).show(500); // <<<<<<<< add #
     });
});

Answer 2

你可以试试这个：

$(document).ready(function() {

    $('input[type=radio]').change(function() {
   $('.choice').hide();
        userChoice = $(this).val();
    console.log(userChoice)


        $('#'+userChoice).show(500);
    });
});

此处示例：

https://jsfiddle.net/5qne0skd/2/

使用单选按钮更改操作元素 - jQuery

2 个答案: