Jump to content


Photo

Chap4 P139


  • Please log in to reply
9 replies to this topic

#1 DP76

DP76

    Active Member

  • Members
  • PipPip
  • 43 posts

Posted 08 January 2014 - 08:21 AM

Hi all,
I'm sue there is an obvious mistake. I ave the code below. When I click on "Go Vegetarian" nothing happens.
What am I missing? All help greatly appreciated
$(document).ready(function(){
 


var v = false;

 
	
	$("button#vegOn").click(function(){
 		
		if (v == false){
 		
 		
	 $("li.fish").parent().parent().detach();
		

				
		v = true;
    
		
  });//end veg button

		
		$("button#restoreMe").click(function(){
	
	
		if (v == true){
			
		v = false;
		
});//end restoreMe button

});//end doc ready


#2 emilybro

emilybro

    New Member

  • Members
  • Pip
  • 1 posts

Posted 31 January 2014 - 08:53 AM

$("li.fish").detach(); is what works for me. Then adding .parent().parent() worked to remove the entire entree item. The only difference I see is that I set v=true; before detaching. Not sure if that makes a difference or not

Edited by emilybro, 31 January 2014 - 09:03 AM.


#3 DP76

DP76

    Active Member

  • Members
  • PipPip
  • 43 posts

Posted 06 February 2014 - 06:49 AM

has anyone got this to work? Fancy putting the correct scripts here? Please?

#4 Stpehen H. W

Stpehen H. W

    New Member

  • Members
  • Pip
  • 5 posts

Posted 20 March 2014 - 08:40 PM

has anyone got this to work? Fancy putting the correct scripts here? Please?

Hi, this has been a while, but I hope it helps:
A better formatted version of you code looks like this:
$(document).ready(function() {
    var v = false;

    $("button#vegOn").click(function() {
        if (v == false) {
            $("li.fish").parent().parent().detach();
            v = true;
/*******************************************************/
        } // !notice! : this is what you've been missing       
/*******************************************************/       
    });//end veg button
   
    $("button#restoreMe").click(function() {
        if (v == true) {
            v = false;
/*******************************************************/
        } // !notice! : this is what you've been missing
/*******************************************************/
    });//end restoreMe button
});//end doc ready

It's just that you missed the closing curly braces of the if condition. Just add them as the code above, then you're good to go.


#5 DP76

DP76

    Active Member

  • Members
  • PipPip
  • 43 posts

Posted 21 March 2014 - 09:17 AM

thank you!...but this deletes everything. not just the fish! So the next bit...rpalcing hamburge can't work as everything has been removed!

Edited by DP76, 21 March 2014 - 09:52 AM.


#6 Stpehen H. W

Stpehen H. W

    New Member

  • Members
  • Pip
  • 5 posts

Posted 21 March 2014 - 11:19 PM


I think the book says they want all the entrees that have fish to be removed, since they need to be restored when clicking 'Restore Menu' you can use a variable having the same scope as 'v' like this (read the comments):
$(document).ready(function() {
	... // this is the part I omit for simplicity

	// define variable $fish holding the entrees containing fish
	var $fish;

	$('button#vegOn').click(function() {
		...
                // for the very first fish item "salmon" in list "Poached Salmon"
		// under "Dinner Entrees",
		// the DOM concerning it expressed using CSS selectors looks like this:
		// TEXT  : Dinner Entrees  Poached Salmon               salmon
		// CSS   : ul.menu_entrees li:nth-child(1) ul.menu_list li.fish
		// jQuery:                 parent()        parent()     $('.fish')[0]
		// so only the list "Poached Salmon" will be detached,
		// other fish items are manipulated the same way
		//
		// as of the hamburgers, the first item and the second item are
		// under "House Slider" and "Southwest Slider" list, both of which
		// are not touch by the detachment of fish items
		$fish = $('.fish').parent().parent().detach();
		...
	});

	$('button#restoreMe').click(function() {
		...
		$('.menu_entrees').children().first().before($fish);
		...
	});
});


#7 DP76

DP76

    Active Member

  • Members
  • PipPip
  • 43 posts

Posted 22 March 2014 - 12:25 AM

that' s the problem....in my program hamburger are deleted. Everything on the left menu goes...including the entries that have no fish.
I have this now:
$(document).ready(function() {
    var v = false;

    $("button#vegOn").click(function() {
        if (v == false) {
            $f = $("li.fish").parent().parent().detach();
            $(".hamburger").replaceWith("<li class='portobello'><em>Portobello 

Mushrooms</em></li>");
            v = true;

        }    

    });//end veg button
   
    $("button#restoreMe").click(function() {
        if (v == true) {
            v = false;

        } 

    });//end restoreMe button
});//end doc ready





Edited by DP76, 22 March 2014 - 12:33 AM.


#8 Stpehen H. W

Stpehen H. W

    New Member

  • Members
  • Pip
  • 5 posts

Posted 23 March 2014 - 07:12 AM


First, make sure your html file has the same structure as described in my last reply.
I think the problem may lay in your html file. Which version do you use? Do you write it by yourself? You can(and actually should) use the html and style files under the 'end' folder, also make sure you download the latest version. My example files were downloaded this month, I think they're pretty new and less error-prone.
Well, despite all others, you can debug your program in Google Chrome, try and review the output of commands below:
$('li.fish')[0];
$('li.fish')[0].parent();
$('li.fish')[0].parent().parent();
Compare the result selected elements, see if they jave the same structure as this:
<div class="menu_wrapper">
	<header class="topper">
		<h2>Our Menu</h2>
		<nav>
			<button id="vegOn">Go Vegetarian</button>
			<button id="restoreMe">Restore Menu</button>
		</nav>
	</header>
	<div class="left_col">
		<h4>Dinner Entrees</h4>
		<ul class="menu_entrees">		
			<li>Poached Salmon
				<ul class="menu_list">
					<li class="fish">salmon</li>
					<li>white wine</li>
					<li>salt</li>
					<li>black pepper </li>
				</ul>
			</li>
			...
		</ul>
	</div>
	...
</div>


#9 DP76

DP76

    Active Member

  • Members
  • PipPip
  • 43 posts

Posted 24 March 2014 - 07:02 AM

ah...I had a rogue <li class="fish">Poached Salmon... as well as <li class="fish">salmon</li>
Problem solved
Thanks so much for the help

#10 Ambition Pete

Ambition Pete

    New Member

  • Members
  • Pip
  • 1 posts

Posted 06 July 2014 - 04:52 AM

I want to know if it write

$("button#restoreMe").click(function() {
location.reload();

});//end restoreMe button
});//end doc ready

is it OK??

Also, I added $(".veg_leaf").removeClass(); . Is it OK?? if not why so

$("button#restoreMe").click(function () {
if (v == true) {
//added back the fish items
$(".menu_entrees li").first().before($fishArray);

//replaced the Portobello Mushroom to hamburger
$(".portobello").replaceWith("<li class='hamburger'>hamburger</li>");
$(".tofu").each(function (i) {
$(this).after($meatArray[i]);
});

$(".tofu").remove();

//removed the veg leaf
$(".veg_leaf").removeClass();
v = false;
}
});//end of restoreMe button
});//end of document ready




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users