Search Link Name for characters

Page 1 of 1

6 Replies - 858 Views - Last Post: 19 November 2012 - 07:17 PM

#1 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 838
  • Joined: 16-September 09

Search Link Name for characters

Posted 18 November 2012 - 01:16 PM

Hey guys! I'm have a link that I'm clicking to show optional data and when I do, it works but it doesn't change the text of the link....

I found some helpful input on google but I can't seem to get it working just right..

Any feedback would be greatly appreciated!

Here's my HTML
<a href = "javascript: void();" id = "showOptionalData">[+] Show Optional Data</a>


Here's my jQuery
$(document).ready(function(){
  $('#showOptionalData').click(function showOptionalData(){
    if($(this+":contains('Hide')").length > 0){
      $(this).text('[+] Show Optional Data');
    }else{
      $(this).text('[-] Hide Optional Data');
    }
    $('.optional').toggle('slow');    
  });
});


I also tried this jQuery (just to see) 
var $txt = $(this).text();
if($($txt).find('Hide')){
  $(this).text('[+] Show Optional Data');
}else{
  $(this).text('[-] Hide Optional Data');
}


As always, thanks in advance!!

This post has been edited by guyfromri: 18 November 2012 - 01:47 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Search Link Name for characters

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6260
  • View blog
  • Posts: 24,030
  • Joined: 23-August 08

Re: Search Link Name for characters

Posted 18 November 2012 - 03:54 PM

Set the text based on whether the .optional container is visible, and change the text of link (and toggle the container) appropriately.
Was This Post Helpful? 1
  • +
  • -

#3 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 838
  • Joined: 16-September 09

Re: Search Link Name for characters

Posted 18 November 2012 - 04:07 PM

That's a really strong idea! Thanks!!!

I'm going to implement that so I can keep moving forward but if anyone would like to point out to me what I did wrong with that first try, I would welcome the chance to learn from it.

Thanks!!!
Was This Post Helpful? 0
  • +
  • -

#4 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 838
  • Joined: 16-September 09

Re: Search Link Name for characters

Posted 18 November 2012 - 04:31 PM

So.....I've changed my code to the following -- now it has some new problems

Try A - This switches to "Hide" but when it closes the div(s) it doesn't switch back to "Show". The div's all function properly but the link text only changes once. I also tried this with just an else statement but same issue. I double checked the jQuery website and confirmed that the property being changed by .toggle is, in fact the display property.
$(document).ready(function(){
  $('#showOptionalData').click(function showOptionalData(){
    $('.optional').toggle('slow');
    if($('.optional').css('display','block')){      
      $(this).text('[-] Hide Optional Data');      
    }else if($('.optional').css('display','none')){
      $(this).text('[+] Show Optional Data');      
    }            
  });
});


Try B - This one opens the div's then closes them a second later. I read up on this and it looks like it's trying to follow the link being that I'm clicking an a href so I also tried to return false at the end of the function but no go...
$(document).ready(function(){
  $('#showOptionalData').click(function showOptionalData(){
    if($('.optional').css('display','block')){      
      $(this).text('[-] Hide Optional Data');      
    }else if($('.optional').css('display','none')){
      $(this).text('[+] Show Optional Data');      
    }
    $('.optional').toggle('slow');            
  });
});


I'm interested in making this work but I'm also interested in making it work with the best possible functions and not a series of work arounds that allow me to continue on without learning from my mistakes.

As always, thanks in advance!!!!
Was This Post Helpful? 0
  • +
  • -

#5 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6260
  • View blog
  • Posts: 24,030
  • Joined: 23-August 08

Re: Search Link Name for characters

Posted 19 November 2012 - 04:00 AM 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
			var changeText = function()
			{
				if ($('.optional').is(':visible'))
				{
					$('#showOptionalContent').text('[-] Hide optional content');
				}
				else
				{
					$('#showOptionalContent').text('[+] Show optional content');
				}
			};
			$(document).ready(function(){
				$('#showOptionalContent').click(function() {
					// Use a callback to change the text once the animation is complete
					$('.optional').toggle('slow', changeText);
				});
			});
		</script>
	</head>
	<body>
		<div id="content">
			<span id="my_content"><a id="showOptionalContent" href="javascript:void(0);">[+] Show optional content</a></span>
			<div class="optional" style="display: none">This is optional content</div>
		</div>
	</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#6 guyfromri   User is offline

  • D.I.C Addict

Reputation: 55
  • View blog
  • Posts: 838
  • Joined: 16-September 09

Re: Search Link Name for characters

Posted 19 November 2012 - 10:17 AM

Learn something new every day :)

Thanks so much!
Was This Post Helpful? 0
  • +
  • -

#7 BobRodes   User is offline

  • Product Manager
  • member icon

Reputation: 607
  • View blog
  • Posts: 3,086
  • Joined: 19-May 09

Re: Search Link Name for characters

Posted 19 November 2012 - 07:17 PM

I tried this and it toggles the text correctly (i think that's what you were having difficulty with originally) 
$(document).ready( function() 
{
    $('#Test').on('click', function(event) {
        x = event.target.text;
        $(this).html(x === 'String 1' ? 'String 2' : 'String 1');
    });
});



<div>
    <a href="#" id="Test">String 1</a>
</div>
Apparently, the text attribute is read-only in this context. Html will actually rewrite the HTML.

I prefer personally to use on instead of click, because it gives more flexibility. Also, putting a function argument of event allows you another way to get hold of the element that was clicked.

This post has been edited by BobRodes: 19 November 2012 - 07:22 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1