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绑定到元素中的文本。

Answer 2

jQuery有一个方便的trim函数：

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

从你的控制台试试这个：

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

了解它如何删除前导和尾随空格？

Answer 3

我们说你有：

<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必须是唯一的。

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

3 个答案: