在jquery中显示和隐藏功能

我在单选按钮后面写了一个html-3 div的代码。我想单击每个按钮将显示该按钮的div中的代码，并将隐藏其他div的两个。在jquery中显示和隐藏功能

下面的代码：

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

并且它没有按下第一个按钮时所需的动作... 很高兴能得到任何帮助 - 谢谢！

来源

2013-12-16 Bramat

你可以添加更多的细节。 –

那JS代码没有意义;你在上面的HTML中没有任何带有id'v'或'i'的东西。 –

你从哪里得到这些ID。这些不在你的html中使用。 –

看起来好像有几件事需要解决。。。

首先，你提到你点击一个单选按钮，它应该显示相关的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 
    }); 
});

问题是，你与目标<div>元素（$("v")）的id属性引用的单选按钮。您需要以另一种方式引用单选按钮，例如$("input[name='v']")（因为名称在表单中应该是唯一的）。这将选择具有等于“v”的name属性的输入。然而，最后，你应该使函数具有通用性，这样你就不必特别引用每个单选按钮。例如，您可以通过抓取表单中的所有单选按钮来完成此操作。。。像这样：

$("#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>

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

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

来源

2013-12-16 19:53:18 talemyn

非常感谢！奇迹般有效：） – Bramat

在你的 “按钮显示的div”

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

来源

2013-12-16 19:38:22 Mark

尝试通过name属性访问元素：

$('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>

来源

2013-12-16 19:46:53

在jquery中显示和隐藏功能

回答

相关问题