如何使用具有唯一类名的jquery定位链接？

Question

<a href="" class="link unique-lightbox-docid(12345)">Download File</a>

首先，我希望将仅具有此类标识符的链接定位到jquery click动作中：unique-lightbox-id（）'。

其次，我希望它抓住打开/关闭括号内的id。

我需要使用正则表达式来完成此操作吗？

Answer 1

请勿将ID包含在课程中。 使用data属性，因为这就是它们的作用。 然后，在与普通类匹配时获取该属性。

 $('.link').click(function (e) { e.preventDefault(); var id = $(this).data('docid'); alert(id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="link" data-docid="doc1">Download File 1</a><br /> <a href="" class="link" data-docid="doc2">Download File 2</a><br /> <a href="" class="link" data-docid="doc3">Download File 3</a><br /> 

Answer 2

尝试使用带有参数RegExp /\\(.*\\)/ String.prototype.slice()和带有参数1, -1 String.prototype.slice() Attribute Contains Selector [name*="value"] String.prototype.match()

 $("a[class*=unique]").on("click", function(e) { e.preventDefault(); var res = e.target.className.match(/\\(.*\\)/)[0].slice(1, -1); // do stuff with `res` $("body").append("<br>" + res); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <a href="" class="link unique-lightbox-docid(12345)">Download File</a> 

Answer 3

我会这样做。

var partialClassName = 'unique-lightbox-docid';

$('[class*="' + partialClassName + '"]').click(function(e){
    var fullClass = $(this).attr('class');
    var firstMatchStr = fullClass.substring(fullClass.indexOf(partialClassName), fullClass.length);
    var elementId = firstMatchStr.match(/\(.*\)/)[0].slice(1, -1);  
    $('#' + elementId).html('This is element with id ' + elementId);
    e.preventDefault();
});

1. 使用jQuery选择器传递要查找的partialClassName
2. 以字符串形式获取完整的类。
3. 从完整的类中，使用indexOf查找类字符串中的第一个匹配项作为起点，并从该匹配项开始获取子字符串。
4. 应用正则表达式搜索括号内的字符串。
5. 如您所知，请删除第一个和最后一个字符作为括号。

如果您使用的类为class="classname(abc) classname2(xyz) unique-lightbox-docid(12345)"则上述方法将确保您以“ unique-lightbox-docid”开头，因此您将返回第一个出现的正则表达式匹配项将确保您始终具有正确的ID。

由于某种原因，本文的代码格式无法正确显示，但这是一个小提琴。

http://jsfiddle.net/SeanWessell/9svvha3q/1/