如何重新编码我的jQuery/JavaScript函数，使其更通用，不需要唯一标识符

Question

我创建了一个运行良好的函数，但它导致我有更混乱的html代码，我必须初始化它。我想看看我是否可以让它更通用，当单击对象时，javascript/jquery 会抓取 href 并执行函数的其余部分，而无需在每个单击的对象上提供唯一 ID。

当前有效的代码：

<script type="text/javascript">
   function linkPrepend(element){
    var divelement = document.getElementById(element);
    var href=$(divelement).attr('href');
    $.get(href,function (hdisplayed) {
     $("#content").empty()
     .prepend(hdisplayed);
        });
     }
 </script>

.html：

<button id="test1" href="page1.html" onclick="linkPrepend('test1')">testButton1</button>
<button id="test2" href="page2.html" onclick="linkPrepend('test2')">testButton1</button>
    <!-- when clicking the button, it fills the div 'content' with the URL's html -->
        <div id="content"></div>

我想最终得到看起来像这样的 html：

<button href="page1.html" onclick="linkPrepend()">testButton1</button>
<button href="page2.html" onclick="linkPrepend()">testButton1</button>
<!-- when clicking the button, it fills the div 'content' with the URL's html -->
<div id="content"></div>

如果有更简单的方法，请告诉。也许可能有一种更通用的方式，javascript/jquery使用事件处理程序并侦听点击请求？那么我什至不需要点击 html 标记吗？

如果可能的话，我希望我们可以使用纯jquery。

Answer 1

我建议在 JavaScript 中设置点击事件(在加载或准备期间(而不是在您的标记中。 在要应用此单击事件的按钮上放置一个公共类。 例如：

<button class="prepend-btn" href="page2.html">testButton1</button>

<script>
    $(document).ready(function() {
        //Specify click event handler for every element containing the ".prepend-btn" class
        $(".prepend-btn").click(function() {
            var href = $(this).attr('href');  //this references the element that was clicked
            $.get(href, function (hdisplayed) {
                $("#content").empty().prepend(hdisplayed);
            });
        });
    });
</script>

Answer 2

您可以传递this而不是 ID。

<button data-href="page2.html" onclick="linkPrepend(this)">testButton1</button>

，然后使用

function linkPrepend(element) {
    var href = $(this).data('href');
    $.get(href, function (hdisplayed) {
        $("#content").empty().prepend(hdisplayed);
    });
}

注意：您可能已经注意到我href更改为data-href。这是因为href按钮的无效属性，因此您应该使用 HTML 5 data-*属性。

但是如果你使用的是jQuery，你应该把内联点击处理程序放在一边，而使用jQuery处理程序。

<button data-href="page2.html">testButton1</button>

$(function () {
    $('#someparent button').click(function () {
        var href = $(this).data('href');
        $.get(href, function (hdisplayed) {
            $("#content").empty().prepend(hdisplayed);
        });
    });
});

$('#someparent button')在这里，您可以使用CSS选择器来查找正确的按钮，也可以向它们附加一个额外的类。

Answer 3

href不是

按钮元素的有效属性。您可以改用 data 属性来存储自定义属性。然后，您的标记可能如下所示

<button data-href="page1.html">Test Button 1</button>
<button data-href="page2.html">Test Button 1</button>
<div id="content">
</div>

从那里，您可以使用"具有属性"选择器来获取具有data-href属性的所有按钮。 jQuery有一个名为.load((的函数，它将获取内容并将其加载到目标中。所以你的脚本看起来像

$('button[data-href]').on('click',function(){
    $('#content').load($(this).data('href'));
});

Answer 4

查看其他响应，这有点将它们结合起来。

<button data-href="page2.html" class="show">testButton1</button>
<li data-href="page1.html" class="show"></li>

类使您能够将这个特定的JavaScript函数放在您选择的任何内容上。

$(".show").click( function(){
    var href = $(this).attr("data-href");
    $.get(href,function (hdisplayed) {
        $("#content").html( hdisplayed );
    });
});

Answer 5

这可以通过一些jQuery轻松实现：

$("button.prepend").click( function(){
    var href = $(this).attr("href");
    $.get(href,function (hdisplayed) {
        $("#content").html( hdisplayed );
    });
});

和小的HTML修改(添加prepend类(：

<button href="page1.html" class="prepend">testButton1</button>
<button href="page2.html" class="prepend">testButton2</button>
<div id="content"></div>

Answer 6

HTML 代码

<button href="page1.html" class="showContent">testButton1</button>
<button href="page2.html"class="showContent">testButton1</button>
<!-- when clicking the button, it fills the div 'content' with the URL's html -->
<div id="content"></div>

JS代码

<script type="text/javascript">
   $('.showContent').click(function(){
         var $this = $(this),
             $href = $this.attr('href');
          $.get($href,function (hdisplayed) {
            $("#content").empty().prepend(hdisplayed);
        });
     }
    });
 </script>

希望对您有所帮助。