PHP and Javascript. Code optimization

Question

I would like some help to optimize my code.

I have a product list.

<ul>
  <li><a href="#" id="item1"> Item 1 </a></li>
  <li><a href="#" id="item2"> Item 2 </a></li>
</ul>

For every item I have a section with the item's details.

<div id="item1-details"> Item Details 1 </div>
<div id="item2-details"> Item Details 2 </div>

These sections are hidden. They only appear when the user clicks on the item listed above.

$("#item1").click(function() { $("#item1-details").show(); });
$("#item2").click(function() { $("#item2-details").show(); });

Up to this point I have no problems. The logic is very basic. The problem comes when the information is retrieved from the database.

When the user clicks on an item, how do I pass the ID of the related detail's section to the jQuery function?

I have two foreach blocks. One to populate the - ul - list and another to create the detail's sections. I can use the item ID to make unique the link and use the same ID adding a character to make unique the details section. But how can I create this automatism with jQuery.

I hope I was clear, even with my English. Thank you all.

clicks "know" what DOM element the click occured on. You can use regular dom operations to retrieve the ID of the item associated with the click, and work from there. e.g onclick="$('#' + this.id + '-details').show();" — Marc B
– Marc B, Commented May 30, 2014 at 16:19
Are you asking us to optimize something that works, or asking for help with something that doesn't work? It's not clear. If the latter, what doesn't work? What do you mean by "pass the ID"? When you render the hidden sections on the page, can't each one include its "id" from server-side code? What does any of that have to do with PHP or your database? — David
– David, Commented May 30, 2014 at 16:20

vebbo · Accepted Answer · 2014-05-30 16:22:51Z

3

you can use data attributes like this

<li><a href="#" id="item1" data-id="1"> Item 1 </a></li>

and then

$("#item1").click(function() { 
    $attr = $(this).attr('data-id');
    $("#item"+$attr+"-details").show(); 
});

answered May 30, 2014 at 16:22

vebbo

2705 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jeroen Over a year ago

+1 But you should change $("#item1") to a class so that it really can be re-used.

gen_Eric Over a year ago

You can also use $(this).data('id') to get the value.

epascarello · Accepted Answer · 2014-05-30 16:27:45Z

2

Based on the fact that the ids are related, you can just use simple click, grab the id, and show it.

$("li").on("click", "a", function(evt) {  //detect click on anchors in the li
    var id = this.id;                  //get id of what is clicked
    $("#" + id + "-details").show();   //show the element 
    evt.preventDefault();
});

answered May 30, 2014 at 16:27

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Wilfredo P · Accepted Answer · 2014-05-30 16:29:22Z

1

You could do, get the id and with cointains (*=) show the the div:

$('div').hide();
$('ul a').click(function(){
    $('div[id*=' + this.id +']').toggle();
    })

DEMO

edited May 30, 2014 at 16:29

answered May 30, 2014 at 16:23

Wilfredo P

4,07430 silver badges46 bronze badges

Collectives™ on Stack Overflow

PHP and Javascript. Code optimization

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related