Question

我在hvd -3 Div中编写了一个代码，它来自单选按钮。我希望点击每个按钮会显示该按钮的div中的代码，并隐藏其他div。

以下是代码：

<html>
    <body>
        <div>
            <form id="A" method="get" action="form.php"> <fieldset>
             <legend> A </legend>

                <div id="Headline">Headline: </div>
                <div><input type="radio" name="B" value="B" onclick="functionb('b')">  <img class="photos" src="b.gif" alt="b"><br><div id="b>Show B</div>
                    <input type="radio" name="C" value="C" onclick="functionc('c')"><img class="photos" src="c.gif" alt="c"><br><div id="c">Show C</div>
                    <input type="radio" name="d" value="d" onclick="functiond('d')"><img class="photos" src="d.gif" alt="d"></div><br><div id="d">Show D</div>

             </fieldset>
        </form>
    </div>
  </body>
</html>

我在JS文件中编写了下一个代码（我需要将所有脚本放在html文件的不同文件中）仅用于第一个按钮：

       $(document).ready(function(){
          $("#b").click(function(){
            $("#b").show();
            $("#c").hide();
            $("#d").hide();
           });
       });

按下第一个按钮时它不会执行所需的操作... 很高兴得到任何帮助 - 谢谢!!

Answer 1

在“按钮显示divs”中设置公共类

<div>
  <input type="radio" name="b" value="B"><img class="photos" src="b.gif" alt="b"><br /><div id="b" class="ButtonDisplayDiv">Show B</div>
  <input type="radio" name="c" value="C"><img class="photos" src="c.gif" alt="c"><br /><div id="c" class="ButtonDisplayDiv">Show C</div>
  <input type="radio" name="d" value="D"><img class="photos" src="d.gif" alt="d"><br /><div id="d" class="ButtonDisplayDiv">Show D</div>
</div>

然后是您的单选按钮事件处理程序

$('input[type="radio"]').change(function () {
   $('.ButtonDisplayDiv').hide(); //hide all the ButtonDisplayDiv Class Elements
   $('#' + $(this).attr('name')).show;  //show the associated selected div
});

Answer 2

尝试按名称属性访问元素：

$('input[name=B]').click(function(){// your action here});

或者如果您需要通过ID访问，则添加id属性：

<input type="radio" id="B" name="B" value="B" onclick="functionb('b')"><img class="photos" src="b.gif" alt="b"><br /><div id="b" class="ButtonDisplayDiv">Show B</div>

Answer 3

看起来您需要解决一些问题。。

首先，你提到你正在点击一个单选按钮，它应该显示相关的div，并隐藏其他的。然后你显示这段代码（由我添加的评论）：

$(document).ready(function() {
    $("#v").click(function() {  // This is the button click
        $("#v").show();         // This shows the related div
        $("#a").hide();         // This hides "other div" number 1
        $("#i").hide();         // This hides "other div" number 2
    });
});

问题是，您正在引用带有目标id元素<div>属性（$("v")）的单选按钮。您需要以另一种方式引用单选按钮，例如$("input[name='v']")（因为名称在表单中应该是唯一的）。这将选择name属性等于“v”的输入。

但最后，您应该将该函数设置为通用函数，这样您就不必专门引用每个单选按钮。例如，您可以通过抓取表单中的所有单选按钮来完成此操作。。。像这样：

$("#A").find("input[type='radio']")

这将获得“A”形式的所有单选按钮输入。然后你可以为每个人附加一个点击功能（见下文）。

其次，我建议给所有的div一个共同的普通类。这样，您可以将.hide()引用绑定到公共类，而不是单个id属性。然后，您可以返回并在首先隐藏所有这些内容后显示特定的<div>。

使用上面的两个建议（并删除一些其他代码，只是为了简化我的答案......你可以在最终代码中重新添加:)），这里有一个可能对你有用的例子：

<强> HTML

<form id="a" method="get" action="form.php">
    <input type="radio" name="b" value="b">
    <img class="photos" src="b.gif" alt="b"><br>
    <div id="b" class="subForm">Show B</div>

    <input type="radio" name="c" value="c">
    <img class="photos" src="c.gif" alt="c"><br>
    <div id="c" class="subForm">Show C</div>

    <input type="radio" name="d" value="d">
    <img class="photos" src="d.gif" alt="d"></div><br>
    <div id="d" class="subForm">Show D</div>
</form>

<强> JS

$(document).ready(function(){
    $("#a").find("input[type='radio']").click(function() {
        $(".subForm").hide();
        $("#" + $(this).attr("name")).show();
    });
});

使用这种方法，您可以收集表单中的所有单选按钮，并为它们附加一个通用的“单击”功能。该函数将隐藏所有div（现在标有一个共同的“subForm”类），然后将显示具有id属性的div，该属性与单选按钮的name属性相匹配点击。

在Jquery中显示和隐藏函数

3 个答案: