Question

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

<?php $count = $helper->count('testimony');?>
<div class="owl-4">
    <?php for ($i=0; $i < $count; $i += 2) : ?>
        <div class="item">
        <?php 
            echo '<h3>'.$helper->get('authorname', $i).'</h3>';
            echo '<p>'.$helper->get('testimony', $i).'</p>' ;

            echo '<h3>'.$helper->get('authorname', $i + 1).'</h3>';
            echo '<p>'.$helper->get('testimony', $i + 1).'</p>' ;
        ?>
        </div>
    <?php endfor; ?>
</div>

所以这就是我认为应该是下一步，但我肯定错过了一些东西。

<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>

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

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

任何有关这方面的帮助都会受到赞赏，我不知道我在这里缺少什么，但我觉得它非常接近。

谢谢！

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中称为对象，但人们也称它们为字典，散列，关联数组，键/值对等。请参阅：https://en.wikipedia.org/wiki/Associative_array

此外，您无法“调用”数组或对象。你调用一个函数。短语的最佳方式是“我在数组中检索/得到索引3处的值”和“我检索/获取对象的第一个HTML属性”。

Answer 2

您可以使用“eval（'variablename'）来获取变量的值。但是您也可以使用eval来获取对具有该ID”eval（'id'）“的对象的引用。所以首先要做的事情。要做的是将按钮的ID更改为数据属性。而不是“id ='firstHTML'”使其成为“data-id ='firstHTML'”。所以，当你评估（“firstHTML”）它知道你的意思是变量而不是按钮对象。

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

这是一个显示它工作的小提琴：http://jsfiddle.net/ub8wz5Lb/

HTML：

<form name="registration_form" form action="reginsert_interest.php" method="post" enctype="multipart/form-data" onSubmit="return Validate();">
<table cellpadding="2" cellspacing="0" border="0"  bgcolor="#CCCCFF">
	<tr><font size="5">Registration</font></tr>
	<tr>
    <td width="150" bgcolor="#9999FF"><strong><font size="4">First Name:</font></strong></td>
          <td width="150"bgcolor="#9999FF"><font size="3"><input name="fname" type="text" size="20" maxlength="30"></font></td></tr>
</table>
	
	
	<input type="submit" name="Submit" value="Submit">
	</form>

使用Javascript：

<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>

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

2 个答案: