jQuery通过ID使用字符串动态选择对象

Question

I have an image gallery that uses modals. In the image modal or outside it, the user can click on a star and mark the image as favorite. Favorite images have a class that makes the star change color its to 'golden'. If a user marks a favorite in the modal, I need to change the color of the star of that image outside the modal as well.

To do this, I thought I could have a

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

in the modal, so that I can get the image number. Then I use that image number as part of a jquery selector.

The images in the gallery have something like this:

<p id = "image_number" class = "hidden"></p>
<!-- for example: <p id = "image_2"  class = "hidden"></p> -->

So, all I need is to successfully select the hidden p tag next to each image, then I could use jquery's next() or parent().find().

This is the relevant code:

...
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')
...

This doesn't work. Jquery tries to find an object using this selector:

"#image_\n 2"

and of course, it doesn't find one. I tried removing the \\n with a regex, but it still doesn't work:

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

Answer 1

It'll probably be better to use a data-attribute on your element rather than getting the text content. Do:

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

Then you can:

...
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')
...

This way you don't bind your javascript to the text inside your elements.

Answer 2

jQuery has a handy trim function:

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

Try this from your console:

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

See how it removes the leading and trailing white-space?

Answer 3

Let's say you have:

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

you can extract the number both using:

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

or

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

Than to target the image like:

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

you do:

$('#image_'+ n)

---

If you really just have:

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

than you can do:

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

Just make sure you don't have duplicate modal_counter ID elements on your page. ID has to be unique.