I have the following code structure. Its a set of wordpress tabs. I have many tabs all over the website, using Jquery i want to trigger a function when a user clicks one of the links, however i cant apply a ID atribute so my funtion below doesnt work...any suggestions?
JQUERY
$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
HTML
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span></li>
</ul>
You can't select them by ID because they don't have IDs. But you can use CSS Atrribute-Equal Selector to get them by href attribute. Like this:
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
// ...
}
More CSS Selectors here.
Working code snippet:
$('[href = "#1485856532455-70ee0dfe"]').click(function() {
alert("#1485856532455-70ee0dfe was clicked! Hoooray!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span>
</a>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
</ul>
Use attribute selector then :
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
$('#1485856532455-70ee0dfe').on('click', function() { - means that on page we have some element with id 1485856532455-70ee0dfe. In your html code no id with text 1485856532455-70ee0dfe, thats why your code not work.
You have two case to fix:
add id's to needed element
change js to $('[href="1485856532455-70ee0dfe"]').on('click', function() {
You cant give a id to a link like that. However you can select the link with jquery by doing $('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
Related
I gave my link a an id where if I click the link, I want my javascript to adjust the background image. I made a js-fiddle of a simple version of what I want here:
https://jsfiddle.net/qp8d390b/
<body background="http://www.blueskiescareers.co.uk/wp-content/uploads/2014/05/blue-sky-clouds.jpg">
<li>
<a id = "attempt1" href="#top">SNOOPY1</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<div id= "#top">TOP PART </div>
</body>
$(document).ready(function() {
$("a[id='attempt1']").click(function(e) {
e.preventDefault();
alert('works');
document.body.background = "https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg";
});
});
I'm new to selecting with javascript. Any help would be appreciated!
try to use $("#attempt1")
use # to get any id in html
Firstly your HTML is invalid; li must be in either a ul or ol and all a elements must have either a name or href attribute.
Secondly, jQuery uses CSS rules, so to select by id is $('#attempt1').
Lastly, to change the background CSS property to an image the URL string should be wrapped in url(). Try this:
$(document).ready(function() {
$("#attempt1").click(function(e) {
e.preventDefault();
$('body').css('background', 'url("https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg")');
});
});
You can select it with :
$('#attempt1')
You should use id-selector in this case
https://api.jquery.com/id-selector/
$("#attempt1")
The selector you used which is attribute selector is more used in inputs than in links (a elements)
https://api.jquery.com/attribute-equals-selector/
You can find more info on jQuery selectors in
https://api.jquery.com/category/selectors/
Hope it helps
I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})
I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.
<a id = "click_show_more" href = "" onclick = "showMore()">
<li id = "more">
MORE
</li>
</a>
<div id = "more_hidden">
<ul id = "list_hidden">
<li>EFG</li>
<li>ABC</li>
</ul>
</div>
The above is my html code. I want to call the javascript function "showMore()" when clicking on a the link "MORE" with id "click_show_more".
This is my javascript code.
function showMore() {
var moreShow = document.getElementById('more_hidden');
moreShow.style.opacity = 0.8;
}
I don't know why this code fails. Nothing happens when I clicked on the link.
Please help me figure it out. Thank you so much!
Remove the href attribute from your link or set it to something like # so that a page won't be loaded. You are linking to another page (or the same page) with that.
Further, your html is invalid. <li> does not belong as a child of <a>.
See this demo with your markup corrected demonstrating the difference between the link with the href and with it removed. http://jsbin.com/iJEDiku/2/edit
Please don't use inline javascript (like onclick in your html). Study about this here: Why is inline JS bad?
Here's your code following better practices. Live demo here (click).
Markup:
<a id="change-opacity">Click here to change opacity.</a>
<div id="opacity-gets-changed">
<ul>
<li>EFG</li>
<li>ABC</li>
</ul>
</div>
JavaScript:
var a = document.getElementById('change-opacity');
var div = document.getElementById('opacity-gets-changed');
a.addEventListener('click', function() {
div.style.opacity = 0.4;
});
I have seen that the inline/html events like onclick, mouseover etc are being used less and less and it is advised to register events using Javascript.
I currently have some HTML like:
<ul id="supported-locations">
<li onclick="setLocationId(32);">Mexico</li>
<li onclick="setLocationId(35);">Mongolia</li>
</ul>
Which works fine but I want to now do this without the "onclick" in the HTML but still be able to retrieve the ID number.
The <li> elements are retrieved via AJAX while the user types into an input box it queries the database and retrieve the data without loading the page.
When the user clicks on one of the countries it will run the setLocationId function which just simply sets a hidden HTML form element with the ID of the selected country so I can use that once the form is submitted.
How do you register an event listener for these <li>'s when the countries and their ID's will always be different and changing depending on what the user types into the box?
Use a data attribute to hold the number. On the onclick event, read the attribute on the element that was clicked.
HTML:
<ul id="supported-locations">
<li data-code="32">Mexico</li>
<li data-code="35">Mongolia</li>
</ul>
JavaScript:
$("#supported-locations").on("click", "li", function() {
var li = $(this);
console.log(li.data("code"));
});
Example:
JSFiddle
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
in jQuery
$('#supported-locations').on('click','li',function(){
setLocationId($(this).data('id'));
})
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
jQuery(function(){
$('#supported-locations li').click(function(){
alert($(this).data('id'))
})
})
I recommend giving a class to the dynamically loaded elements, then use jquery .on(http://api.jquery.com/on/) method to register event listeneres to elements belonging to a class, even those that are dinamically loaded..
Then you could just read out the data stored in the element(in the form of data-something attributes).
<ul id="supported-locations>
<li id="32">Mexico</li>
<li id="35">Mongolia</li>
</ul>
//Jquery
$("#supported-locations > li").on('click',function(){
setLocationId($(this).attr('id'));
});
When you register your event, you still have the ability to use this, which is linked to the HTML element.
In other word, you still can do something like that
<li id="YOUR_ID">Mexico</li>
And get the id of the li tag
You can attach an event handler to the li:
<ul id="supported-locations">
<li id="location32">Mexico</li>
<li id="location35">Mongolia</li>
</ul>
$("#supported-locations li").click(function() {
alert($(this).attr("id"));
});
http://jsfiddle.net/puL95/
try this.
$("#supported-locations li").click(function() {
alert("me")
}
I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:
I want to make a onmouseover on a tag to change the class closed to open in other element. Example:
Link
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
If you include jQuery:
Add id for your elements:
Link
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
You can use Link
And JS:
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/
This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;
<script>
function changeUl() {
// Get the first found UL, anywhere in the body
document.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
Link
With ID
<script>
function changeUl() {
var wrapper = document.getElementById('wrapper');
wrapper.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
<div id="wrapper">
Link
</div>
You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.