Javascript 单击“更改”后使用id显示div

我陷入困境，需要一些帮助。jQuery的新特性

正在尝试显示具有特定ID的div。。但id将根据单击的按钮进行更改

---

我正在努力完成的

• 第一个选项1和第二个选项1将显示某些内容
• 第一个选项1和第二个选项2将显示某些内容
• 第一个选项1和第二个选项3将显示某些内容
• 第一个选项2和第二个选项1将显示某些内容
• 第一个选项2和第二个选项2将显示某些内容
• 第一个选项2和第二个选项3将显示某些内容

现在我被卡住了。任何帮助都将不胜感激！我已经在这里发布了我的代码，但是如果你还需要什么，请告诉我

$（文档）.ready（函数（）{
var selectedFirstOption=“firstoption1”；
var selectedSecondOption=“secondoption1”；
$（“.optionSets”）.hide（）；
$（“.firstOptionButton”）。单击（函数（）{
selectedFirstOption=$（this.attr（'id'）；
$（“.results”）.html（“#”+selectedFirstOption+selectedSecondOption）；
});
$（“.secondOptionButton”）。单击（函数（）{
selectedSecondOption=$（this.attr（'id'）；
$（“.results”）.html（“#”+selectedFirstOption+selectedSecondOption）；
});
});
按钮{
光标：指针；
}



第一种选择1


第一种选择2




第二种选择1


第二种选择2


第二种选择3


显示：第一个选项1+第二个选项1

显示：第一个选项1+第二个选项2

显示：第一个选项1+第二个选项3

显示：第一个选项2+第二个选项1

显示：第一个选项1+第二个选项1

显示：第一个选项1+第二个选项1

您可以使用简单的字符串连接来完成此操作

var selectedID = selectedFirstOption + selectedSecondOption;
$("#" + selectedID).show();

如果我们想象
selectedFirstOption==“firstoption1”
和
selectedSecondOption==“secondoption3”
，那么

selectedFirstOption + selectedSecondOption

是同一件事吗

"firstoption1" + "secondoption3"

"firstoption1secondoption3"

这和

"firstoption1" + "secondoption3"

"firstoption1secondoption3"

最后，通过执行
“#”+selectedID
我们生成

"#firstoption1secondoption3"

这是您正在寻找的选择器。
您可以使用简单的字符串连接来完成此操作

var selectedID = selectedFirstOption + selectedSecondOption;
$("#" + selectedID).show();

如果我们想象
selectedFirstOption==“firstoption1”
和
selectedSecondOption==“secondoption3”
，那么

selectedFirstOption + selectedSecondOption

是同一件事吗

"firstoption1" + "secondoption3"

"firstoption1secondoption3"

这和

"firstoption1" + "secondoption3"

"firstoption1secondoption3"

最后，通过执行
“#”+selectedID
我们生成

"#firstoption1secondoption3"

您要寻找的是哪个选择器。
您需要一些变量来保存状态

$(document).ready(function() {

  var selectedFirstOption = "";
  var selectedSecondOption = "";

  $(".optionsSets").hide();

  $(document).on('click', 'button', function (event) {
        $(".optionsSets").hide();

        var btn = $(event.target);
        if (btn.is('.firstOptionButton') {
            selectedFirstOption = btn.get(0).id;
        } else if (btn.is('.secondOptionButton') {
            selectedSecondOption = btn.get(0).id;
        }

        $('#' + selectedFirstOption + selectedSecondOption).show();
         $(".results").html("#" + selectedFirstOption + selectedSecondOption);
  });
});

show行将始终执行，但是jquery结果集将为空，直到您同时选择第一个选项和第二个选项，这意味着什么也不会发生。
您需要一些变量来保存状态

$(document).ready(function() {

  var selectedFirstOption = "";
  var selectedSecondOption = "";

  $(".optionsSets").hide();

  $(document).on('click', 'button', function (event) {
        $(".optionsSets").hide();

        var btn = $(event.target);
        if (btn.is('.firstOptionButton') {
            selectedFirstOption = btn.get(0).id;
        } else if (btn.is('.secondOptionButton') {
            selectedSecondOption = btn.get(0).id;
        }

        $('#' + selectedFirstOption + selectedSecondOption).show();
         $(".results").html("#" + selectedFirstOption + selectedSecondOption);
  });
});

show行将始终执行，但jquery结果集将为空，直到您同时选择第一个选项和第二个选项，这意味着什么也不会发生。
@Wowsk Good catch！已经修好了，但换了按钮怎么办？单击按钮后，选项1和选项2将发生更改…@ToniDavisJ您的代码根本不会显示您正在更改选项。除非您的意思是更改
selectedFirstOption
和
selectedSecondOption
。如果这就是你的意思，那么它仍然有效。您已经在更新这些值，因此您只需在任何时候运行此代码即可显示某些内容，即在两个“单击”函数的末尾运行此代码。是。。单击按钮后，selectedfirstoption和selectedsecondoption的值将更改。。这是我正在进行的现场项目。。我把这篇文章搞砸了，因为我用了标签而不是按钮。。显示的内容取决于突出显示的速度和速度GB@ToniDavisJ对，所以这个代码仍然有效。我不确定我是否理解问题所在。每次更改
selectedFirstOption
或
selectedSecondOption
时，只需再次运行此代码即可。@Wowsk祝您好运！已经修好了，但换了按钮怎么办？单击按钮后，选项1和选项2将发生更改…@ToniDavisJ您的代码根本不会显示您正在更改选项。除非您的意思是更改
selectedFirstOption
和
selectedSecondOption
。如果这就是你的意思，那么它仍然有效。您已经在更新这些值，因此您只需在任何时候运行此代码即可显示某些内容，即在两个“单击”函数的末尾运行此代码。是。。单击按钮后，selectedfirstoption和selectedsecondoption的值将更改。。这是我正在进行的现场项目。。我把这篇文章搞砸了，因为我用了标签而不是按钮。。显示的内容取决于突出显示的速度和速度GB@ToniDavisJ对，所以这个代码仍然有效。我不确定我是否理解问题所在。每次更改
selectedFirstOption
或
selectedSecondOption
时，只需再次运行此代码。这肯定会起作用，但没有理由在侦听按钮时更改ID的收集方式或将单击处理程序放在文档上。不过，我确实喜欢制作一键式处理程序的想法，您可以使用
$（“.firstOptionButton.secondOptionButton”）
来实现这一点。这显然是一个局部示例。这取决于OP来调整事情以更好地适应他的实际用例。如果选项是动态的，在更高的容器上使用委托也会更好。您可以在不管理单击处理程序的情况下添加/删除选项。这肯定会起作用，但没有理由在侦听按钮时更改ID的收集方式或将单击处理程序放在文档上。不过，我确实喜欢制作一键式处理程序的想法，您可以使用
$（“.firstOptionButton.secondOptionButton”）
来实现这一点。这显然是一个局部示例。这取决于行动