javascript - Jquery使用字符串动态地按id选择对象

Question

我有一个使用模式的图片库。在图像模态中或外部，用户可以单击星标并将图像标记为收藏。最喜欢的图像有一个类别，可以使星星的颜色变为“金色”。如果用户在模态中标记收藏，我还需要在模态外更改该图像的星标颜色。

为此，我想我可以有一个

<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,"");

Answer 1

在您的元素上使用 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 绑定(bind)到元素中的文本。