如何将jquery/javascript函数重新编码为更通用的函数，而不需要唯一的标识符？

我已经创建了一个功能，它工作得很好，但是它会导致我在初始化它的地方有很多混乱的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>

函数linkPrepend（元素）{
var divelement=document.getElementById（元素）；
var href=$（divelement.attr（'href'）；
$.get（href，函数（hdisplayed）{
$（“#内容”）.empty（）
.预结束（显示hd）；
});
}

html:

testButton1
测试按钮1

我希望最终得到类似以下内容的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>

testButton1
测试按钮1

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

---

如果可能的话，我更愿意使用纯jquery。

您可以传递

这个

而不是ID

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

注意：您可能已经注意到我将

href

更改为

数据href

。这是因为

href

是按钮的无效属性，因此您应该使用HTML5

数据-*

属性

但是如果您使用的是jQuery，那么应该将内联单击处理程序放在一边，使用jQuery处理程序

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

---

$（“#someparent button”）

在这里，您可以使用CSS选择器查找正确的按钮，也可以在按钮上附加一个额外的类。

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

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

和小的HTML修改（添加

prepend

class）：

testButton1
测试按钮2

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>

testButton1
测试按钮1

JS代码

<script type="text/javascript">

   $('.showContent').click(function(){
         var $this = $(this),
             $href = $this.attr('href');

          $.get($href,function (hdisplayed) {
            $("#content").empty().prepend(hdisplayed);
        });
     }

    });

 </script>

$（'.showContent'）。单击（函数（）{
变量$this=$（this），
$href=$this.attr（'href'）；
$.get（$href，函数（hdisplayed）{
$（“#内容”）.empty（）.prepend（hdisplayed）；
});
}
});

---

希望能有所帮助。

我建议用JavaScript（在onload或onready期间）而不是在标记中设置click事件。在要应用此单击事件的按钮上放置一个公共类。例如：

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

testButton1
$（文档）.ready（函数（）{
//为包含“.prepend btn”类的每个元素指定click事件处理程序
$（“.prepend btn”）。单击（函数（）{
var href=$（this.attr（'href'）；//此引用已单击的元素
$.get（href，函数（hdisplayed）{
$（“#内容”）.empty（）.prepend（hdisplayed）；
});
});
});

href

不是元素的有效属性。您可以改为使用该属性来存储自定义特性。然后，您的标记可以如下所示

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

---

看一下其他的反应，这种反应把它们结合了起来

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

---

好像你在尝试创建angularjs:）哇，大家都有很多很棒的答案！我现在意识到，我也应该问一下什么是最好的搜索引擎优化？我想我的网站是SEO兼容，所以我不伤害我的pageranks。数据href方法是搜索引擎优化的最佳方法吗？我可以将data href用于其他对象（如LI等）而不出现问题吗？谢谢。如果您想正确验证，您需要使用HTML5doctype

。无论您使用什么Doctype，按钮中的href属性几乎总是错误的，因此请尝试使用

data-*

，是的，您可以在任何元素上使用它感谢所有优秀的输入人员！非常感谢，并给了我很多新的知识。第二个例子（jQuery）没有达到预期的效果

this.href

将返回空值。没错，不知何故，我假设

href

是一个按钮属性。谢谢你的通知。这个答案综合了所有其他答案，最后似乎效果最好。谢谢大家的贡献！

<script type="text/javascript">

   $('.showContent').click(function(){
         var $this = $(this),
             $href = $this.attr('href');

          $.get($href,function (hdisplayed) {
            $("#content").empty().prepend(hdisplayed);
        });
     }

    });

 </script>

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

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

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

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

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