/    Sign up×
Community /Pin to ProfileBookmark

convert jquery to javascript

Copy linkTweet thisAlerts:
Dec 20.2016

could you please help me to convert my jquery code to javascript

[CODE]
<script type=”text/javascript”>

$(document).ready(function(){
$(‘.clickButtons’).mouseover(function() {
$(this).siblings().toggleClass(“vis”);
$(“div.textC”).attr(‘style’,’visibility:hidden;’)
var index = $(“li”).index(this); $(“div.textC”).eq(index).attr(‘style’,’visibility:visible;’)
});
$(‘.clickButtons’).mouseleave(function() {
$(this).siblings().toggleClass(“vis”);
});
});
</script> [/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Dec 20.2016 — How about CSS instead? A quick example:
[code=html]<!DOCTYPE hTmL>
<title>a title</title>
<style>
div p {visibility: hidden;}
.clickButtons:hover ~ p {visibility: visible;}
</style>

<div>
<span class="clickButtons">hover 1</span>
<p>para 1a</p>
<p>para 1b</p>
</div>

<div>
<span class="clickButtons">hover 2</span>
<p>para 2a</p>
<p>para 2b</p>
</div>[/code]

Add in the styles for your class, change selectors, whatever.
Copy linkTweet thisAlerts:
@shumoniraauthorDec 20.2016 — How about CSS instead? A quick example:
[code=html]<!DOCTYPE hTmL>
<title>a title</title>
<style>
div p {visibility: hidden;}
.clickButtons:hover ~ p {visibility: visible;}
</style>

<div>
<span class="clickButtons">hover 1</span>
<p>para 1a</p>
<p>para 1b</p>
</div>

<div>
<span class="clickButtons">hover 2</span>
<p>para 2a</p>
<p>para 2b</p>
</div>[/code]

Add in the styles for your class, change selectors, whatever.[/QUOTE]


thanks but it does not hide the "hover 1" "hover 2" text. when I mouseover on hover 1 text, it still shows the hover 2 text.
Copy linkTweet thisAlerts:
@rootDec 20.2016 — A couple of things, [b]<script type="text/javascript">[/b] only needs to be [b]<script>[/b] the type attribute was dropped a few years ago.

$(document).ready(function(){ would be a document.onload = function(){} element that would exist in the <head> of a HTML document as it delays the triggering of the cose within the braces until the HTML page had loaded.

$('.clickButtons').mouseover(function() {
$(this).siblings().toggleClass("vis");
$("div.textC").attr('style','visibility:hidden;')
var index = $("li").index(this); $("div.textC").eq(index).attr('style','visibility:visible;')
});
$('.clickButtons').mouseleave(function() {
$(this).siblings().toggleClass("vis");
});
}); is a string of event handlers to trigger the functions or events when a condition is met, this is easily modified to be done with the onclick attributes of the respective DOM objects but would be much tider to use the CSS methods to control style elements because thats what CSS was developed for, JavaScript can still do the style elements and still have a place but it is preferable to use CSS because it requires less scripting.

if you do want to access elements of DOM, you can use [b]document.getElementsByTagName("li")[/b] or if items have an [B]id[/B] the use of [B]document.getElementById("myID")[/B] to hook that element, the difference is that the by tag name method hooks all elements as an array which is handy to use when you have multiple elements you wish to affect a change in.
Copy linkTweet thisAlerts:
@Kevin2Dec 20.2016 — thanks but it does not hide the "hover 1" "hover 2" text. when I mouseover on hover 1 text, it still shows the hover 2 text.[/QUOTE]

[code=html]<!DOCTYPE html>
<title>a title</title>
<style>
ul {list-style-type: none;}

ul li ul,
ul li:hover ul li ul {display: none;}

ul li:hover ul,
ul li ul li:hover ul,
ul li li li:hover ul {display: block;}
</style>

<ul>
<li>hover 1
<ul>
<li>para 1a</li>
<li>hover 2
<ul>
<li>para 2a</li>
<li>para 2b</li>
</ul></li>
</ul></li>
</ul>[/code]
Adjust as necessary.
×

Success!

Help @shumonira spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...