Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm coding something in-which certain text appears depending on which li you click. The jQuery I have written works, but doesn't take into account that all this data is being outputted by a PHP loop. Is there a way where I can change the jQuery I've written can work for an infinite number of li's rather than only the ones I've specified?
$('#selection1').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message1').addClass('active');
$('#selection1').addClass('active');
});
$('#selection2').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message2').addClass('active');
$('#selection2').addClass('active');
});
$('#selection3').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message3').addClass('active');
$('#selection3').addClass('active');
});
Remember that in jQuery you use selectors from css, so the easiest way to do it would be to cahnge this
$('#selection1').on('click', function() {
to this
$('[id^="selection"]').on('click', function() {
Which will apply to all elements that has an id that starts with "selection".
Also inside the click event use variable this instead of refering again to id.
$('[id^="selection"]').on('click', function() {
var selection = $(this),
number = selection.attr("id").substr(9);
$('.content-block, .content-selector').removeClass('active');
$('#message' + number).addClass('active');
selection.addClass('active');
});
If you make the buttons, you can add a data-atribute (1,2 or 3), and then add a class to the clicked button like this:
$('.buttonClicked').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
var num = $(this).attr('data-atribute'); //Get the 1,2 or 3 number dynamically
$('#message'+num).addClass('active');
$('#selection'+num).addClass('active');
});
Use the function like this
$('li').on('click', function() {
var num = $(this).attr("id").substr(6);
console.log(num)
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message'+ num).addClass('active');
$('#selection'+ num).addClass('active');
});
$('li').on('click', function() {
var num = $(this).attr("id").substr(6);
console.log(num)
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message'+ num).addClass('active');
$('#selection'+ num).addClass('active');
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<ul>
<li id="select1">
1
</li>
<li id="select2">
2
</li>
<li id="select3">
3
</li>
<li id="select4">
4
</li>
</ul>
If you really don't want to change your HTML, you can use jQuery ^= selector to select every element with an id starting with "selection".
$(document).on('click', '[id^="selection"]', function() {
let id = +this.id.replace('selection',''); //Get the ID value here
$('.content-block,.content-selector').removeClass('active');
$('#message'+id).addClass('active');
$(this).addClass('active');
});
div{
width: 20px;
height: 20px;
background-color: blue;
display: inline-block;
margin: 5px;
}
div.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection1"></div>
<div id="selection2"></div>
<div id="selection3"></div>
<div id="selection4"></div>
<div id="selection5"></div>
<div id="message1"></div>
<div id="message2"></div>
<div id="message3"></div>
<div id="message4"></div>
<div id="message5"></div>
Related
I'm creating a 5 star rating system with html php and jquery i dont know how to stop the stars rating when user has clicked on rating.
In my code when user click on 4 stars the alert box shows 4 stars but when the user move his mouse from stars the stars shows 0 rating.
here is my code, i'm not posting the css here
HTML :
<div class="rating">
<div class="ratings_stars" data-rating="1"></div>
<div class="ratings_stars" data-rating="2"></div>
<div class="ratings_stars" data-rating="3"></div>
<div class="ratings_stars" data-rating="4"></div>
<div class="ratings_stars" data-rating="5"></div>
</div>
JQUERY :
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
$('.ratings_stars').click(function() {
$('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
$(this).addClass('selected'); // Adds the selected class to just the one you clicked
var rating = $(this).data('rating');
alert(rating);
// Get the rating from the selected star
$('#rating').val(rating); // Set the value of the hidden rating form element
});
Guessing because you haven't said what you expect to happen. It could be that you want the selected rating, and the stars before it, to be highlighted.
So instead of this
$(this).addClass('selected');
you use this, similar to how you have previously.
$(this).prevAll().andSelf().addClass('selected');
But I would also remove the hover class so that it's obvious to the user on click
$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');
Demo
<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html>
<head>
<title>Rating System jQuery Plug by Aldanis Vigo</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<style type='text/css' language='css'>
.record{
opacity: .50;
}
#value-display{
position: relative;
top: -5px;
margin-left: 10px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<span value='0' id='ratingbar'>
<img class='record' number='1'/>
<img class='record' number='2'/>
<img class='record' number='3'/>
<img class='record' number='4'/>
<img class='record' number='5'/>
<span id='value-display'>0 / 5</span>
</span>
</body>
<script>
//Change these variables to your liking!!
var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
var iconwidth = '20px';
var iconheight = '20px';
var value = $('#ratingbar').attr('value');
$('#ratingbar img').each(function(){
//Set the icon for each
$(this).attr('src', iconsrc);
$(this).attr('width', iconwidth);
$(this).attr('height', iconheight);
$(this).hover( function(){
$(this).css('opacity','1');
$(this).prevAll().css('opacity','1');
});
$(this).click( function(){
//Clear all of them
$(this).parent().attr('value',$(this).attr('number'));
$(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}else{
$(this).css('opacity','.50');
}
});
});
$(this).mouseout( function(){
$(this).css('opacity','.50');
$(this).prevAll().css('opacity','.50');
//Color up to the selected ones.
$('#ratingbar img').each( function(){
if($(this).attr('number') <= $(this).parent().attr('value')){
$(this).css('opacity','1');
}
});
});
});
</script>
</html>
I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products
Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});
There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin
You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()
Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
This is my site mycareerpath.co.in. In that How can I delete "FREE DOMAIN + 1GB HOSTING" from my site
Note
please right click and see the view source.
By far simplest and will work in all browsers, use HTML comments:
<!--
<font style="TOP: 0%; LEFT: 0%; VISIBILITY: visible; POSITION: absolute;background-color:#ffffff; z-index:111">
<a style="font-family:arial;font-size:12px;text-decoration: none; color: #0000FF;" href="http://hosting.India.to"> Domain Name +
1GB Linux India Web Hosting in Rs.349 </a><font size="4"> </font><br>
</font>
-->
Use hide() function in jquery
Example:-
<a href='test.html' id='link'>hello</a>
$('#link').hide();
add id to you anchor and use id selector..
$('#anchorId').hide(); //to hide
$('#anchorId').click(function(e){
e.preventDefault();
}); //to disable the link.
or with CSS
#anchorId{
display:none;
}; //to hide
If you cannot comment your code, you can add a onpageload attr to body and call a javascript function to not display the anchor tag.
<script type="text/javascript">
function Hide() {
document.getElementById('Id_of_anchor_tag').style.display = "none";
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".messages").fadeOut('slow');
});
</script>
<font style="TOP: 0%; LEFT: 0%; VISIBILITY: visible; POSITION: absolute;background-color:#ffffff; z-index:111">
<div class="messages">
<a style="font-family:arial;font-size:12px;text-decoration: none; color: #0000FF;" href="#">welcome</a><font size="4"> </font><br>
</font></div>
This will not only remove link but will display an message WELCOME which will fade and disappear automatically .
Use following code to hide the anchor. Note, this will only hide the anchor inside the font tag and nothing else.
$(document).ready( function() {
$("font a").hide();
});
EDIT:
To hide very specific anchor inside font tag, which contain certain URL, use following code -
$(document).ready( function() {
$("font a").each(function() {
if($(this).attr("href") == "http://hosting.India.to") {
$(this).hide();
}
});
});
I have a page with 2 Div containers ( Left and Right ).
PartsList page has 5 dynamically generated DIVS.
Custom page has 5 dynamically generated DIVS.
The div with id "layout" isnt getting recognized with the jQuery .on(). Please help. Thank you for you time :).
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
$(function() {
$(".left").load("PartsList.php",function() {alert("success");});
$(".right").load("Custom.php", function() {alert("success");});
$("#layout").children().on({click: function() {
alert($(this).attr('id'));
}
});
});
</script>
<body>
<div class="main">
<div class="left">
//Load Left page.
</div>
<div class="right">
//Load Structure page.
</div>
</div>
</body>
</html>
PartsList
<?php
for ($x = 1; $x < 6; $x++)
{
$divs = <<<here
<div id = 'div$x' class = 'list'><strong>Div: $x</strong></div>
here;
echo $divs;
}
?>
Custom
<?php
echo '<div id="layout">';
for ($y = 0; $y < 5; $y++)
{
echo "<div id='x$y' style='
position: absolute;
width: 200px;
height: 100px;
top: ".(100 * $y)."px;
border: 2px solid blue;
cursor: pointer;
'></div>";
}
echo '</div>';
?>
in jquery 1.7+ use on like
$(document).on('click','dynamicElement',function(e){
//handler code here
});
in the earlier versions use delegate
$(document).delegate('dynamicElement','click',function(e){
//handler code here
});
you can replace the document with parent element of the dynamically generated element
From the Jquery online manual:
.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
url: string containing the URL to which the request is sent.
data: map or string that is sent to the server with the request.
complete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request completes.
You probably need to put the .on function as a callback of the .load for that Custom.php page.
Something like this EXAMPLE:
$(function() {
$(".left").load("PartsList.php",function() {alert("success");});
$(".right").load("Custom.php", function() {alert("success");
$("#layout").children().on({click: function() {
alert($(this).attr('id'));
}
});
});
});
I think you've got the wrong syntax for the .on() function it should be something like:
$('document').on('click', '#layout > div', function() {
alert($(this).attr('id'));
});
You bind to the document and when a user clicks on a child div in layout the event 'bubbles' up the DOM to the document where it is caught.
Okay. I found the answer anyhow. For people who were thinking why it didnt work. It was because of the stupid QUOTES.
$("document") should have been $(document) since document isnt a tag <.
And tada thats it.
Sigh.
Thanks for the help everyone :)
for example ive got a div like:
<div class="y1">
<img src="i/o.png" />
</div>
and
<!-- pre load -->
<div class="p1" style="display:none">
<h5 class="ob">Title</h5>
<img class="ob" src="i/ob.png" />
<small class="ob">Description</small>
PLAY
</div>
and this jquery
<script type="text/javascript">
$("div.y1").hover(
function () {
$('div.p1').slideDown('slow', function() {
});
}
);
</script>
my question is how can i repeat it for 12 times. i mean when i hover on y1, show p1, y2 => p2, y3 => p3 ... y12 => p12. i hope you guys understand me. thank you so much!!!!
Should look like:
$(function(){
$('div[class^=y]').hover(function(){
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideDown('slow', function() {
});
}, function() {
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideUp('slow', function() {
});
});
});
Example: http://www.jsfiddle.net/Q5Ug2/
I'm going to assume that your y# divs are inside a div with the id container. Secondly, I'm going to assume that none of your y# divs have any other classes applied to them.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow');
}).delegate('div[class^=y]', 'mouseleave', function(){
$('div.p' + this.className.slice(1)).slideUp('slow');
});
This uses delegate to avoid the cost of binding to multiple DOM elements.
Edit To hide the p# div on hovering on another element, you can use this code.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow').siblings().slideUp();
});
Do things a bit differently..
Use ID's for the p# and y# series indicators.
On your DIV tags for the p# series, add a title of the y# series.. so <div id="p1" title="y1">
On your DIV tags for the y# series, add a class.. <div id="y1" class="hoverMe">
$('div.hoverMe').hover( function() {
$('[title=' + $(this).attr('id') + ']').slideDown('slow');
});