Question

我正在尝试为每个ID

实例运行相同的脚本

例如，如果用户单击带有＃btn-1的按钮，脚本将运行＃title-1来获取html并继续打开弹出窗口和scrollTop。

我有一个粗略的工作示例，但我想知道如何在不需要重复的情况下使其更简洁。

PHP

<h2 id="title-<?php echo $i ;?>">Product Title</h2> 
<div id="btn-<?php echo $i ;?>">Sign Up</div>

的jQuery

    $("#btn-1").click(function(){
        var name = $("#title-1").html();
        $("#product").val(name);
        $("#the_popup, #overlay_pop").fadeIn(500);
        $("html, body").animate({ scrollTop: 0 }, 400);
        return false;
    });
    $("#btn-2").click(function(){
        var name = $("#title-2").html();
        $("#product").val(name);
        $("#the_popup, #overlay_pop").fadeIn(500);
        $("html, body").animate({ scrollTop: 0 }, 400);
        return false;
    });
    $("#btn-3").click(function(){
        var name = $("#title-3").html();
        $("#product").val(name);
        $("#the_popup, #overlay_pop").fadeIn(500);
        $("html, body").animate({ scrollTop: 0 }, 400);
        return false;
    });

    // and so on....

Answer 1

使用课程 - 不知道您想要的其他HTML

<h2 class="title">Product Title</h2> 
<div class="btn">Sign Up</div>



$(".btn").on("click",function(e) {
    e.preventDefault();
    var name = $(this).prev(".title").html();

    $(this).find(".product").val(name);

    $(this).find(".the_popup, .overlay_pop").fadeIn(500);
    $("html, body").animate({ scrollTop: 0 }, 400);
});

Answer 2

$（＆＃39;按钮[id ^ =＆＃34; btn - ＆＃34;]＆＃39;）所有按钮的id属性值以＆＃34; btn - ＆＃34;开头然后附上点击处理程序。

然后使用正则表达式从id中删除数字。然后使用该数字找到相应的#title *

$("button[id^=btn-]").click(function (e) {
    var num = this.id.replace(/\D/g, '');
    var name = $("#title-" + num).html();
    $("#product").val(name);
    $("#the_popup, #overlay_pop").fadeIn(500);
    $("html, body").animate({ scrollTop: 0 }, 400);
    e.preventDefault()
});

http://jsfiddle.net/SeanWessell/uux332yt/

通过访问类肯定可以更轻松地完成。

在顺序ID上运行脚本

2 个答案: