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

Question

试图通过从按钮本身传递一个变量来将这三个子函数合并为一个子函数。我目前有四个按钮，每个按钮都会触发主要功能。在主函数中，我有三个子函数，它们使用三个新的 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>

所以这是我认为接下来应该做的，但我肯定遗漏了一些东西。

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

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

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

如有任何帮助，我们将不胜感激，我不太清楚我在这里遗漏了什么，但我觉得它非常接近。

谢谢！

Answer 1

你可以这样获取被点击元素的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>'
}

然后您的切换语句将如下所示：

$('div.switchMeOut').replaceWith(htmls[passThis]);

关于您的评论：

htmls 不是一个数组，它是一个对象。它在 javascript 中称为对象，但人们也称它们为字典、散列、关联数组、key/value 对等。参见：https://en.wikipedia.org/wiki/Associative_array

此外，您不能 "call" 数组或对象。你调用一个函数。最好的表达方式是 "I retrieved/got the value at index 3" 数组和 "I retrieved/got the firstHtml property" 对象。

Answer 2

您可以使用 "eval('variablename') to get the value of the variable. However you can also use eval to get a reference to an object with that ID "eval('id')”。所以首先要做的是将按钮的 ID 更改为数据属性。而不是 "id='firstHTML'" "data-id='firstHTML'"。所以当你 eval("firstHTML") 它知道你指的是变量而不是按钮对象。

并且您可以删除 "switchMeOut" div 中的内联脚本标记，并在相同的 document.ready 函数中使用 jquery 加载它。

这里有一个 fiddle 显示它正在工作：http://jsfiddle.net/ub8wz5Lb/

HTML:

<div id="parentblock">
    <h5>Contacts List</h5>
    <div class="switchMeOut">
    </div>
</div>

<button data-id="firstHTML" class="swapper first">Shows First Only </button>
<button data-id="secondHTML" class="swapper second">Shows Second Only </button>
<button data-id="thirdHTML" class="swapper third">Shows Third Only </button>

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

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

consolidate javascript function by passing a variable from html object ID such as button ID

html

javascript

jquery

replacewith