problem constructing a variable

Forum Moderators: open

Message Too Old, No Replies

problem constructing a variable

ctoz

11:29 am on Sep 9, 2011 (gmt 0)

Something basic not understood.

With a collection of tags
 
 
I want to append text to certain classes, depending on the second character of the class name.

So, the function should look like

function addText(char1) {
var char1 = $('p').className.charAt(1) // wrong, but don't get why $('p').append(function() { return 'etc etc' });
}
To add to class "a1" or class "b1", you'd call addText('1').

Can someone put me right on this?

rocknbil

7:42 pm on Sep 9, 2011 (gmt 0)

Like so?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <style type="text/css"> 
 p { font-weight:bold; } 
 div { width: 20%; margin: auto; } 
 </style> 
 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
 <script type="text/javascript"> 
 $(function(){ 
 $('.addit').click(function () { addText($(this).html()); return false;}); 
 }); 
 // 
 function addText(char1) { 
 var debug = ''; 
 var char2; 
 $('#change-graphs p').each(function (i) { 
 char2 = $(this).attr('class').charAt(1); 
 debug += 'i: ' + i + 'char: ' + char2 + '\n'; 
 if (char2==char1) { $(this).append('etc etc'); } 
 }); 
 } 
 </script> 
</head> 
 
<body> 
<div id="change-graphs"> 
 <p class="a1">a1</p>  
 <p class="a2">a2</p>  
 <p class="a3">a3</p> 
 <p class="b1">b1</p> 
 <p class="b2">b2</p> 
 <p class="b3">b3</p> 
</div> 
<div> 
<p><a href="#" class="addit">1</a></p> 
<p><a href="#" class="addit">2</a></p> 
<p><a href="#" class="addit">3</a></p> 
</div> 
</body> 
</html>

Cliff notes on what's happening:

- wrapped in div change-graphs to restrict the append to those p's only.
- the innerHTML of the links is used to get "1, 2, 3" and pass to the function.
- We have a collection of paragraphs, so you'll need to loop through them. Even if your previous worked, it would only have the last one. Normally you could assign the text to them all in one statement, but you don't know what each class name is prepended with so you have to loop.
- Use attr() to get at the "class" attribute. Once you access it properly, you can change in charAt to get the second character.
- if the second character matches the value passed to the function, it will append.
- wrap it up by attaching the action to the anchors in $(function)
- debug is for debugging, you can add an alert to check values in a single alert.

ctoz

11:09 pm on Sep 9, 2011 (gmt 0)

Hey thanks, for the code, and for the explanation. That's going to help me a whole lot.

Cheers

rocknbil

5:13 pm on Sep 12, 2011 (gmt 0)

From the PM,

If I have a collection of tags, and I want to operate on them depending on their class (eg class="a1", "a2" ... "a66", "b1" ,b2... "b66") how to make the class the variable?

The function isn't called from a link (this is where I'm having trouble with your solution), but as part of a sequence of functions within a switch function; and there are multiple similarly-structured switch functions.

Then your example,

function doSome(clss) {

//...
var clss = elP.className;

The first thing is - look how you're overwriting the variable clss. You're already passing it as a parameter, then re-define it, which is a bit counter to the whole idea of "telling" the function what class to look for. In the previous case, you need two variables - one to pass to the function, and one for a temporary variable to check against the value that's passed.

It doesn't matter where the variable comes from, I used a link as an example. You could pass anything to the function. If you pass the whole classname though, (which is really a better idea anyway,) some small changes are required, ones that actually eliminate the "second variable."

Look carefully at the source code, does not contain etc etc," but on load calls the function that sets them. This function can come from anywhere at any time, see the remaining link.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <style type="text/css"> 
 p { font-weight:bold; } 
 div { width: 20%; margin: auto; } 
 </style> 
 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
 <script type="text/javascript"> 
 $(window).load( 
 function() { 
 var test_array = ['a2','b1','b3']; 
 for (v in test_array) { 
 addText(test_array[v]); 
 } 
 }); 
 // 
 function addText(char1) { 
 $('#change-graphs p').each(function (i) { 
  if ($(this).hasClass(char1)){ $(this).append('etc etc'); } 
 }); 
 } 
 </script> 
</head> 
<body> 
<div id="change-graphs"> 
 <p class="a1">a1</p>  
 <p class="a2">a2</p>  
 <p class="a3">a3</p> 
 <p class="b1">b1</p> 
 <p class="b2">b2</p> 
 <p class="b3">b3</p> 
</div> 
<p>This is to demonstrate the function,  
<a href="#" onclick="addText('a1'); return false;">Click to append to a1</a></p> 
</body> 
</html>

ctoz

7:17 am on Sep 13, 2011 (gmt 0)

... beginning to understand: it's a problem when you learn by example, rather than structurally. Thanks again for your patience.

cheers