-1

Hello i've got a problem with the selectors in jquery. I made a minimal example in the following, where you can click the buttons and change the color of the targets next to the buttons. I cannot specifiy the targets like class="target1" and class="target2".

I really dont understand why it only works for the first button ... what do i have to change to get the color changed through the corresponding button?

Thank you very much for your effort!!!

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

$( "#dialog-link" ).click(function( event ) {
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"});
});    
    
});
</script>
</head>
<body>

<button id="dialog-link">click me1</button>
<div style="width:500px;" class="start">
Target1
</div>
<button id="dialog-link">click me2</button>
<div style="width:500px;" class="start">
Target2
</div>

</body>
</html>
Rei.M
  • 1
  • 1

3 Answers3

1

Suggested Answer: Duplicate IDs are invalid HTML and will cause issues when it comes to scripting. Avoid if at all possible. Change your Id's to class and then your jquery selector to a class selector (".").

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

$( ".dialog-link" ).click(function( event ) {
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"});
});    
    
});
</script>
</head>
<body>

<button class="dialog-link">click me1</button>
<div style="width:500px;" class="start">
Target1
</div>
<button class="dialog-link">click me2</button>
<div style="width:500px;" class="start">
Target2
</div>

</body>
</html>
Randi Ratnayake
  • 674
  • 9
  • 23
  • Please revisit HTML, JQuery basics! – Randi Ratnayake Apr 25 '17 at 12:54
  • 1
    *"Suggested Answer"* doesn't explain what is different or why it helps – charlietfl Apr 25 '17 at 12:54
  • And please remove condescending comment, it is uncalled for – charlietfl Apr 25 '17 at 12:56
  • thank your very much. Am i allowed to ask further questions here through another answer i create to keep it in this thread? The example problem is solved but in my code there still seems to be a problem. its about dialog boxes – Rei.M Apr 25 '17 at 13:02
  • @Rei.M If you have another question about THIS code then you can continue it here. If it is about another piece of code it is best to start a new question. – blackandorangecat Apr 25 '17 at 13:08
  • im not allowed to ask another question so here is a fiddle with my problem. https://jsfiddle.net/6h5ad7xr/1/ what worked for the example seems to make problems for dialog boxes. Any ideas? – Rei.M Apr 25 '17 at 14:14
  • That's a different code snippet. Anyway, what is your problem there? – Randi Ratnayake Apr 25 '17 at 14:18
  • sorry i had to update it, if there are two buttons they dont open the dialog boxes – Rei.M Apr 25 '17 at 14:19
  • yeah its a different snippet but the same problem. the buttons cant select the right dialog box – Rei.M Apr 25 '17 at 14:21
  • This is my take on this: http://jsfiddle.net/randikaratnayake/37yko531/ You really need to understand JQuery selectors by class and Ids and their use. If you have two unrelated dialogs to open you need to use different Id/ Class. Class for more for grouped selection. Id's for a specific selection. Hope that helps. – Randi Ratnayake Apr 25 '17 at 14:35
  • Thank you, but the problem why i cant use different class names is that my content (button and dialog boxes) are generated dynamic. Its not for an static webpage. – Rei.M Apr 25 '17 at 14:41
  • I have used class and Id where they should be. To convert your all dialog boxes to have same look and feel and animations I used class. But to open up the correct dialog box I used the Id. Hope this SO comment will explain that to you in a better way. http://stackoverflow.com/a/12889421/684030 – Randi Ratnayake Apr 25 '17 at 14:48
  • Looking back at your original JS fiddle when you wire up the button click you refer to this and inside button html you don't have the dialog box. It's out side the button. – Randi Ratnayake Apr 25 '17 at 14:52
0

If you change the IDs to classes it works. IDs have to be unique - use classes if it is going to be applied to more than 1 element.

Don't forget to change the jQuery selector too; from #dialog-link to .dialog-link.

Hope this helps.

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

$( ".dialog-link" ).click(function( event ) {
    $(this).next(".start:first").css({"color": "red", "border": "2px solid red"});
});    
    
});
</script>
</head>
<body>

<button class="dialog-link">click me1</button>
<div style="width:500px;" class="start">
Target1
</div>
<button class="dialog-link">click me2</button>
<div style="width:500px;" class="start">
Target2
</div>

</body>
</html>
blackandorangecat
  • 1,246
  • 5
  • 18
  • 37
0

After some further research i found this solution which fits perfect for my problem:

html:

<span class="helpButton">Button</span>
<div class="helpDialog">Help Content</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">Help Content 2</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">Help Content 3</div>

javascript:

    jQuery(function($) {
  $('.helpButton').each(function() {  
    $.data(this, 'dialog', 
      $(this).next('.helpDialog').dialog({
        autoOpen: false,  
        modal: true,  
        title: 'Info',  
        width: 600,  
        height: 400,  
        position: [200,0],  
        draggable: false  
      })
    );  
  }).click(function() {  
      $.data(this, 'dialog').dialog('open');  
      return false;  
  });  
});

didnt got the original link anymore but here is the corresponding fiddle:

http://jsfiddle.net/nick_craver/ZwLcE/

Rei.M
  • 1
  • 1