Jquery通过id动态选择对象使用字符串

Jquery select object by id dynamically using a string

本文关键字：字符串 对象 选择 通过 id 动态 Jquery      更新时间：2023-09-26

我有一个使用情态的图片库。在图像模态中或在图像模态外，用户可以单击星号并将图像标记为收藏。最喜欢的图像有一个类，使星星改变颜色为"金色"。如果用户在模态中标记了收藏夹，我需要在模态之外更改该图像的星号的颜色。

要做到这一点，我想我可以有一个

<p id = "modal_counter" class = "hidden">number</p>

，这样我就可以得到图像的编号。然后我使用该图像编号作为jquery选择器的一部分。

图库中的图片如下所示:

<p id = "image_number" class = "hidden"></p>
<!-- for example: <p id = "image_2"  class = "hidden"></p> -->
所以，我所需要的就是成功地选择每个图像旁边隐藏的p标记，然后我可以使用jquery的next()或parent().find()。

这是相关代码:

...
var modal_counter = div_parent.find('#modal_counter').text();
var counter = "#image_"+String(modal_counter);
/* I would like the counter to be something like "#image_2" */
var $(counter).parent().find('.star').addClass('golden')
...

这行不通。Jquery尝试使用以下选择器查找对象:

"#image_'n 2"

，当然，它找不到。我试着用正则表达式删除'n，但它仍然不起作用:

counter_processed = modal_counter.replace(/(<([^>]+)>)/ig,"");

在元素上使用data-attribute可能比获取文本内容更好。做的事:

<p id = "modal_counter" class = "hidden" data-counter="number">number</p>

那么你可以:

...
var modal_counter = div_parent.find('#modal_counter').data('counter');
var counter = "#image_" + modal_counter;
/* I would like the counter to be something like "#image_2" */
var $(counter).parent().find('.star').addClass('golden')
...

这样你就不会将javascript绑定到元素中的文本。

jQuery有一个方便的trim函数:

var modal_counter = div_parent.find('#modal_counter').text().trim();

在您的控制台中试试:

$.trim("'n'nHello'r'nThere'n")

看到它是如何去除前后空白的了吗?

假设你有:

<p id="modal_1" class="hidden">Img 1</p>

可以同时使用:

// If you need it from the text
var n = $("[id^=modal_]").text().match(/'d+/); // 1

或

// If you need it from the ID
var n = $("[id^=modal_]")[0].id.match(/'d+/);  // 1


<img id="image_1" src="someimage.jpg" alt="SEO">
你:

$('#image_'+ n)

如果你真的只有:

<p id="modal_counter" class="hidden">3</p>

比你能做的要多:

var n = $('#modal_counter').text();  // "3"
$("#image_"+ n)                      // .fadeIn() or whatever...

只要确保你的页面上没有重复的modal_counter ID元素。ID必须是唯一的

相关文章：