Question

我在同一页面上有一系列div，我附加了一个类似于<a>标记的点击功能，将用户引导到从自定义数据属性中提取的URL。我的HTML如下：

<div id="my-button1" class="button-style-1" data-href="http://www.stackoverflow.com">
  Button
</div>

<div id="my-button2" class="button-style-1" data-href="http://www.w3schools.com">
  Button 2
</div>

和jQuery：

$('#my-button1,#my-button2').click(function() {
    var dataURL = $(this).data('href');
    window.open(dataURL, '_blank');
  });

我的问题是，是否可以将选择器简化为：

$('#my-button[i]')

如果我在同一页面上包含许多这些div，它会更紧凑吗？如果有可能，我将如何实现这种效果？

Answer 1

为什么不在每个按钮上使用课程？然后只需选择班级

$('.my-buttons').click(...)

Answer 2

您可以使用$('div[data-href]')，该data-href适用于具有$('div.myclass属性的任何div。

您的更新示例：https://jsfiddle.net/fLj7y0kz/1/

我完成它并看到它完成的典型方式是@arop建议并使用特定的类来处理这些元素并使用类选择器Protected Sub Login_Authenticate(sender As Object, e As AuthenticateEventArgs) Handles Login.Authenticate Dim Username As String = Login.UserName Dim password As String = Login.Password Dim SQLCommand As String = "SELECT level FROM users WHERE (username= '" & Username & "' AND pw = '" & password & "')" Dim level As String Dim con As MySqlConnection = New MySqlConnection() con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings("test").ToString() Dim cmd As MySqlCommand = New MySqlCommand(SQLCommand, con) con.Open() If cmd.ExecuteScalar() = Nothing Then level = "" Else level = cmd.ExecuteScalar().ToString() End If con.Close() If level = "B" Or level = "G" Then Session("Level") = level Session("User") = Username FormsAuthentication.RedirectFromLoginPage(Username, False) Else Login.FailureText = "Try Again" End If End Sub）`。

Answer 3

您可以使用nth-child（）属性通过索引获取元素。请看下面的示例代码 $（＆＃39;＃my-button：nth-child（1）＆＃39;）。click（function（）{}）

Answer 4

使用循环中的id创建动态div。希望这对你有帮助

var mybutton = [];
var url = ["http://www.stackoverflow.com", 
           "http://www.w3schools.com",
           "http://www.w3schools.com/jquery", 
            "http://www.w3schools.com/css"];

for (i = 0; i < 4; i++) {
  //alert("hi");
  $("body").append("<div class='button-style-1' 
     id='mybutton[" + [i] +"]' data-href=" + url[i] + ">Button</div>")

}

codepen - http://codepen.io/nagasai/pen/xOVERN

使用编号ID简化选择器

4 个答案: