homepage Welcome to WebmasterWorld Guest from 54.227.141.101
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
problem constructing a variable
ctoz




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

Something basic not understood.

With a collection of <p> tags
<p class="a1"> <p class="a2"> <p class="a3">
<p class="b1"> <p class="b2"> <p class="b3">
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




msg:4360684
 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




msg:4360733
 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




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

From the PM,

If I have a collection of <p> 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




msg:4361769
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved