如何使用函数更改jQuery ID选择器

Question

In my html file I have #book1 #book2 etc. as divs.

I'm trying to set it up so that I can call the function (addToPage) for each product and pass in my object (book1) and it will put my product info onto the page. Any help is appreciated!

var book1 = {
name:'name of book', 
author:'name of author'
}

//////////// THIS WORKS

function addToPage(productId) {
$('#book1 .name').text(productId.name);
$('#book1 .author').text(productId.author);
}
addToPage(book1)

/////////// THIS DOESN'T WORK / CAN YOU TELL ME WHY?

function addToPage(productId) {
$('#productId .name').text(productId.name);
$('#productId .author').text(productId.author);
}
addToPage(book1)

Answer 1

You are passing in an object. So the variable will not be available as part of the argument.

Use

 var book1 = { id: 'book1', name: 'name of book', author: 'name of author' } function addToPage(product) { $('#' + product.id + ' .name').text(product.name); $('#' + product.id + ' .author').text(product.author); } addToPage(book1) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="book1"> <p class="name"></p> <p class="author"></p> </div> 

I believe you have the elements book1 and book2 etc in you HTML. But you jQuery selector is looking for an element by id productId . You need to replace that with the variable that you are passing in so that you are making the right selection.