通过从html对象ID（如按钮ID）传递变量来整合javascript函数_Javascript_Jquery_Html_Replacewith

通过从html对象ID（如按钮ID）传递变量来整合javascript函数

javascript jquery html

通过从html对象ID（如按钮ID）传递变量来整合javascript函数,javascript,jquery,html,replacewith,Javascript,Jquery,Html,Replacewith,通过传递按钮本身的变量，尝试将这三个子函数合并为一个子函数。我目前有四个按钮，每个按钮都触发主要功能。在primary函数中，我有三个子函数，它们使用三个新的html变量之一更改div的内容。因此，每个按钮都可以将div更改为其各自的内容。这段代码现在对我来说是可行的，没有问题，但我认为必须有一种方法，通过将.replaceWith设置为全局变量，将该子函数变成一个函数，而不是三个函数。函数中会有一个getter，它检查被单击按钮的ID，并将其传递给replaceWith <script&

通过传递按钮本身的变量，尝试将这三个子函数合并为一个子函数。我目前有四个按钮，每个按钮都触发主要功能。在primary函数中，我有三个子函数，它们使用三个新的html变量之一更改div的内容。因此，每个按钮都可以将div更改为其各自的内容。这段代码现在对我来说是可行的，没有问题，但我认为必须有一种方法，通过将.replaceWith设置为全局变量，将该子函数变成一个函数，而不是三个函数。函数中会有一个getter，它检查被单击按钮的ID，并将其传递给replaceWith

<script>
$(document).ready(function(){
    $("button.first").click(function(){
        $('div.switchMeOut').replaceWith(firstHTML);
    });
    $("button.second").click(function(){
        $('div.switchMeOut').replaceWith(secondHTML);
    });

    $("button.third").click(function(){
        $('div.switchMeOut').replaceWith(thirdhtml);
    });

});
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 
</script>


<body>
<div id="parentblock">
    <h5>Contacts List</h5>
    <div class="switchMeOut">
    <script> document.write (firstHTML + seconcHTML + thirdHTML); </script>
    </div>
</div>

<button id="firstHTML" class="swapper first">Shows First Only </button>
<button id="seconcHTML" class="swapper second">Shows Second Only </button>
<button id="thirdHTML" class="swapper third">Shows Third Only </button>
</body>


$（文档）.ready（函数（）{
$（“button.first”）。单击（函数（）{
$（'div.switchMeOut'）.replaceWith（firstHTML）；
});
$（“button.second”）。单击（函数（）{
$（'div.switchMeOut'）.replaceWith（secondHTML）；
});
$（“button.third”）。单击（函数（）{
$（'div.switchMeOut'）。替换为（第三个TML）；
});
});
var firstHTML='First Section Content'；
var secondHTML='secondsection Content'；
var thirdHTML='Third Section Content'；
联系人列表
document.write（firstHTML+seconHTML+thirdHTML）；
只显示第一个
只显示第二个
只显示第三个

下面是我认为下一步应该做的，但我肯定错过了一些东西

<script>
$(document).ready(function(){
    $("button").click(function(){
         // some code here to get the buttons ID element
         // and possibly set a variable to that buttons id.
        var passThis = button#;
        $('div.switchMeOut').replaceWith(passThis);
    });
});


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
//这里有一些代码来获取buttons ID元素
//并可能为该按钮id设置一个变量。
var passThis=按钮#；
$（'div.switchMeOut'）。替换为（passThis）；
});
});

然后让每个按钮都有自己的id。例如：

<button id="firstHTML" class="swapper first">Shows First Only </button>

仅显示第一个

在这方面的任何帮助都将不胜感激，我不太知道我在这里错过了什么，但我觉得它非常接近

谢谢

您可以像下面这样获得单击元素的ID：

var passThis=$（this.attr（“id”）
但我认为你也需要这样做：
var htmls = {
    firstHTML: '<div class="switchMeOut"><p>First Section Content</div>',
    secondHTML: '<div class="switchMeOut"><p>Second Section Content</div>',
    thirdHTML: '<div class="switchMeOut"><p>Third Section Content</div>'
}

var htmls={
firstHTML:“第一节内容”，
secondHTML:“第二节内容”，
第三节：“第三节内容”
}

然后，您的切换语句将如下所示：
$（'div.switchMeOut'）.replacetwith（htmls[passThis]）
关于您的评论：
htmls不是数组，而是对象。它在javascript中被称为对象，但人们也将其称为字典、哈希、关联数组、键/值对等。请参阅：
此外，您不能“调用”数组或对象。你调用一个函数。对于数组来说，最好的表达方式是“我检索到了/得到了索引3处的值”，对于对象来说，最好的表达方式是“我检索到/得到了firstHtml属性”。
您可以使用“eval（'variablename'）来获取变量的值。但是，您也可以使用eval来获取对ID为“eval（'ID'）的对象的引用“。因此，要做的第一件事是将按钮的ID更改为数据属性。将其改为“数据id='firstHTML'”，而不是“id='firstHTML'”。因此，当您评估（“firstHTML”）时，它知道您指的是变量，而不是按钮对象
您可以去掉“switchMeOut”div中的内联脚本标记，并在同一document.ready函数中使用jquery加载该标记
这里有一把小提琴显示它在工作：
HTML:

联系人列表
只显示第一个
只显示第二个
只显示第三个

Javascript:
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 

$(document).ready(function(){
    $("button").click(function(){
      var id = $(this).data("id");
      $('div.switchMeOut').html(eval(id));
    });
    $('div.switchMeOut').html(firstHTML + secondHTML + thirdHTML);
});

var firstHTML='第一节内容'；
var secondHTML='secondsection Content'；
var thirdHTML='Third Section Content'；
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var id=$（this.data（“id”）；
$（'div.switchMeOut'）.html（eval（id））；
});
$（'div.switchMeOut'）.html（firstHTML+secondHTML+thirdHTML）；
});
您是否有小提琴或其他东西显示出不起作用？看起来你已经明白了。是的，我确实找到了按钮的id，它只有（this.id），甚至可以说'var passThis=this.id'，但当我将它添加到replaceWith时，它只会输出按钮id。。。所以它有点接近。下一部分是将所有html与该按钮id相关联？您是否要求帮助获取单击按钮的id？@MrBurger是的，我现在使用（this.id）找到了该部分。现在，我如何将正确的html部分与该按钮id相关联？到目前为止，它正在将div内容更改为按钮id（firstHTML）。@loganpixel查看我的回答谢谢，成功了！所以你把这些部分变成了一个数组，它实际上不是一个数组。它是一个对象，但它使用了一种特殊的带有方括号的语法，可以让您传入字符串。您还可以使用htmls.firstHTML
、htmls.secondHTML
等访问属性。htmls.firstHTML
与使用htmls[“firstHTML”]相同，谢谢您的帮助！我确实知道我可以使用htmls。首先，当我运行文档时。在页面加载时写入以显示它们。认为这是一个数组。那么，通过调用对象及其相应的匹配字符串使其在replaceWith中工作的魔力是什么呢？再次感谢您的帮助，结果非常出色，感谢您提供的附加信息，以便我能够理解它是如何工作的。干杯：当有其他解决方案时，为什么使用eval？Eval效率低下，难以调试，并且容易受到XSS攻击。见：
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 

$(document).ready(function(){
    $("button").click(function(){
      var id = $(this).data("id");
      $('div.switchMeOut').html(eval(id));
    });
    $('div.switchMeOut').html(firstHTML + secondHTML + thirdHTML);
});