如何在jQuery代码中转义“[”字符

Question

I'm trying to set some values in some INPUT elements but my code doesn't work. See the code below:

<?php foreach($languages as $language): ?>
   $('input[name="product_description\\[<?php echo $language["language_id"]; ?>\\]\\[name\\]]"').val(data.items[0]['volumeInfo']['title']);
   $('input[name="product_description\\[<?php echo $language["language_id"]; ?>\\]\\[description\\]]"').val(data.items[0]['volumeInfo']['description']);
<?php endforeach ?>

The HTML markup looks like this:

<input type="text" value="" size="100" name="product_description[1][name]">

What's wrong there? jQuery doesn't return any error and data.items[0]['volumeInfo']['title'] has values so what I'm doing wrong?

Answer 1

Don't mix HTML, PHP, and JavaScript together in 4 lines.

Less lines is not better code, mixing languages is worse code. Do your best to separate concerns, this makes your code modular and easier to use. Your errors like these simply don't occur in code that has a good separation of concerns going on.

The first thing you need to think about is: "Why am I writing code to write more code a bunch of times?"

At the end of the day, you're just trying to do this a bunch of times with different foo and bar values:

var inputElement = $('input[name="product_description[foo][bar]"]');
inputElement.val(data.items[0]['volumeInfo']['title']);

Which is clearly suitable to be a JavaScript function (not PHP code):

function fooBar(foo, bar) {
  var inputElement = $('input[name="product_description[' + foo + '][' + bar+ ']"]');
  inputElement.val(data.items[0]['volumeInfo'][bar]);
}

Still not the cleanest, but hey, now you've got a single point your JavaScript passes through.

OK, so now you just need to feed it some data, which you can do if you had an array such as:

var baz = [ { "language_id": "foo1", "barVal": "bar1" }, { "language_id": "foo2", "barVal": "bar2" }, { "language_id": "foo3", "barVal": "bar3" }, ]

Hey, you can generate that in PHP with:

json_encode($languages); //Assuming you've set up a value for barVal...

So now your jQuery just needs to loop through it.

$.each(baz, function(key, val){
    fooBar(val["language_id"], val["barVal"]);
})

So, what might your whole thing look like?

//Whatever.php
var baz = <?php echo json_encode($languages); ?>;
function fooBar(foo, bar) {
  var inputElement = $('input[name="product_description[' + foo + '][' + bar+ ']"]');
  inputElement.val(data.items[0]['volumeInfo'][bar]);
}
$.each(baz, function(key, val){
    fooBar(val["language_id"], val["barVal"]);
})

Some concerns I've had looking at your code... you didn't quite give enough information for me to understand what exactly it is you're doing. Also, I suspect you didn't want to put "data.items[0]['volumeInfo']" into each value, but that's what your code said so I ran with it. You should be able to look at the code above and find a few ways to make it do what you want.

Don't use variables foo, bar, baz, or buz in production. These are place-holder names that are for example code only. Use descriptive variable names, there's no hidden meaning behind these (in case you haven't seen these before).

Don't mix your code, and if you do, seperate the concerns as much as you can. The escaping behaviour is documented in the jQueryAPI, but adding yet another layer of escaping complexity from PHP brought you to this frustrating situation. You can avoid this pain in the future by doing this.

Using names and arrays for input values like this is really not ideal at all. Read up on some of the API for both jQuery and the native DOM that it's built on, see if you can find a better way. It exists. Check the tag wiki, I've personally spent time making sure there's great content in it.

Finally, I didn't test this or validate that it runs, but the code structure is what you should be following. I'm not writing the code for you, I'm showing you a structure to get this done in a way that will leave your hair intact when you have to come maintain this in 6 months.

Good luck.