如何将我的 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 使用事件处理程序并监听点击请求可能有更通用的方式？那么我什至不需要 onclick html 标记？

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

Answer 1

您可以传递 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 选择器来找到正确的按钮，或者您可以向它们附加一个额外的 class。

Answer 2

这很容易通过 jQuery:

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

和小 HTML 修改（添加 prepend class）：

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

Answer 3

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>

希望对您有所帮助。

Answer 4

我建议在 JavaScript（在加载或就绪期间）而不是在您的标记中设置点击事件。在要应用此点击事件的按钮上放置一个普通的 class。例如：

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

href 不是用于存储自定义属性的 button element. You can instead use the data 属性的有效属性。您的标记可能如下所示

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

从那里您可以使用 Has Attribute selector to get all the buttons that have the data-href attribute. jQuery has a function called .load() 获取内容并将其加载到目标中。所以你的脚本看起来像

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

Answer 6

查看其他回复，将它们结合起来。

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

class 使您能够将此特定 javascript 功能置于您选择的任何位置。

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

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

how to recode my jquery/javascript function to be more generic and not require unique identifiers?

html

javascript

generics

jquery

dry