Javascript 在某些db查询之后，如何将“使切换”影响到现有单选按钮onClick toggle？_Javascript_Jquery_Wordpress

Javascript 在某些db查询之后，如何将“使切换”影响到现有单选按钮onClick toggle？

javascript jquery wordpress

Javascript 在某些db查询之后，如何将“使切换”影响到现有单选按钮onClick toggle？,javascript,jquery,wordpress,Javascript,Jquery,Wordpress,也许我不清楚我的标题，看起来很混乱，所以这是我的代码。在WordPress中制作插件 <script type="text/javascript"> $(document).ready(function() { $("input[name$='radio_btn']").click(function() { var test = $(this).val(); $("div.togglediv").hide();

也许我不清楚我的标题，看起来很混乱，所以这是我的代码。在WordPress中制作插件

<script type="text/javascript">
    $(document).ready(function() {
        $("input[name$='radio_btn']").click(function() {
            var test = $(this).val();

            $("div.togglediv").hide();
            $("#togglediv" + test).show();
        });
    });
</script>


$（文档）.ready（函数（）{
$（“输入[name$='radio\u btn']）。单击（函数（）{
var test=$（this.val（）；
$（“div.togglediv”）.hide（）；
$（“#togglediv”+test）.show（）；
});
});

我在表单中有两个单选按钮用于输入数据：

   <label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
   , or&nbsp;
   <label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>

粘贴代码
或
放置图像

这是我的两个部门：

<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>

div1
第2组

场景：我使用相同的表单插入数据和编辑数据。插入时，我可以在两个div之间切换，默认情况下，第一个div处于选中状态。如果我点击另一个，那么div切换得很好，我可以一次使用其中的任何一个。所以插入的东西是好的

现在，当我要编辑数据时，我使用

$\u GET[]

和db query获取数据，并将它们相应地传递到它们的字段，它们也做得很好。但是在这里切换的问题是，当

的数据显示为

isset

时，

的数据也显示为

isset

，但是如果不通过单击进行切换，则字段不可见。您知道：(

我尝试用一种基本的方式将HTML

checked=“checked”

从一个交换到另一个，但失败了，因为jQuery与它们不匹配

因此，我需要以某种方式更改jQuery，以便在我输入数据和编辑数据时切换工作。我可以做哪些更改来将jQuery更改为我想要的方式？

您有两个选项：

1）在php中显示/隐藏div

2）将“test”的值传递给javascript并添加

$("#togglediv" + test).click();

事实上，还有第三种选择，我更喜欢。创建一个.hidden css类，并在呈现页面时将其添加到php中（添加到明显隐藏的togglediv中）。然后使用addClass（'hidden'）和removeClass（'hidden'）代替hide（）/show（）。我不确定这是否会更慢/更快，但我认为这会使它更具可读性

CSS


$（文档）.ready（函数（）{
$（“输入[name$='radio\u btn']”）。绑定（'change'，function（）{
var test=$（this.val（）；
$（“div.togglediv”）.removeClass（“隐藏”）；
$（“#togglediv”+test）.addClass（'hidden'）；
});
});

试试看（它对我有用）

初始加载时不显示div，选择单选按钮时将显示div

我添加了我使用的jQuery库链接，以防万一

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

    $("div.togglediv").addClass('hidden');

        $("input[name$='radio_btn']").click(function() {
            var test = $(this).val();

            $("div.togglediv").hide();
            $("#togglediv" + test).show();

        });
    });
</script>

<style>

.hidden { display: none; }

</style>

</head>

<body>

   <label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
   , or&nbsp;
   <label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>

<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>

</body>
</html>


$（文档）.ready（函数（）{
$（“div.togglediv”）.addClass（“隐藏”）；
$（“输入[name$='radio\u btn']）。单击（函数（）{
var test=$（this.val（）；
$（“div.togglediv”）.hide（）；
$（“#togglediv”+test）.show（）；
});
});
.hidden{显示：无；}
粘贴代码
或
放置图像
第一组
第2组

我将使用两个隐藏输入，我将以与div相同的方式切换它们，以了解提交的表单，隐藏输入数据的div仍将在div内为php设置变量

所以我会

$("input[name$='radio_btn']").click(function() {
        var test = $(this).val();

        $("div.togglediv").hide();
        $("input.togglevalue").attr('disabled', 'disabled');
        $("input#toggleinput" + test).removeAttr('disabled');
        $("#togglediv" + test).show();

    });

然后在php中，在每个div中都有这两个输入

<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>


//当前div内容

及


//当前div内容

然后在php中，我会检查这些输入，如果它们被设置为：

<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>

您的div中没有类

-->

$（“div.togglediv”）.hide（）不起作用，谢谢。我真的有。我在最小化代码时忘了提到它们。现在添加：）@也许你也可以展示一下你是如何插入和编辑数据的。
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>

<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>

<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>