Hello i have a blog which get data via ajax request using jquery. This data contains posts with title and content. The content is added via summernote and we have image and text together. When i want to create html page for each post i do this with jquery
<script>
$(document).ready(function () {
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
var id = getUrlParameter('id');
$.ajax({
type: 'GET',
url: 'http:///api/posts/' + id,
dataType: "json",
async: false,
data: {},
success: function (data) {
var posts = data.data;
$.each(posts, function (i) {
var $title = '';
var $content = '';
$.each(posts[i], function (key, val) {
if (key == 'title') {
$title = val;
}
if (key == 'content') {
$content = val;
}
});
var start = $content.indexOf('<img');
var end = $content.indexOf('">') - 1;
var addstyle = $content.indexOf('.jpg') + 2;
var myimage = $content.substr(start, addstyle) + ' ' + 'style="width: 970px;"' + '>';
var $target = $("#target");
$("#doc_title").append($title);
$("#title").append($title);
$("#img").append(myimage);
$("<p> </p>").append($content.substr(end + 3, $content.length - (end + 3))).appendTo($target);
});
}
});
});
</script>
<html>
<head>
</head>
<body>
<div class="container">
<h2 id="title"></h2>
<figure class="post-image" id="img">
</figure>
<div class="post-content" id="target"></div>
</div>
</body>
</html>
Also i have buttons for sharing article on social networks.
<h4>Share this article</h4>
<div class="sharethis-inline-share-buttons st-inline-share-buttons st-left st-has-labels st-animated"
id="st-1">
<div class="st-total st-hidden">
<span class="st-label"></span>
<span class="st-shares">
Shares
</span>
</div>
<div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m21.7 16.7h5v5h-5v11.6h-5v-11.6h-5v-5h5v-2.1c0-2 0.6-4.5 1.8-5.9 1.3-1.3 2.8-2 4.7-2h3.5v5h-3.5c-0.9 0-1.5 0.6-1.5 1.5v3.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
<div class="st-btn" data-network="twitter" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m31.5 11.7c1.3-0.8 2.2-2 2.7-3.4-1.4 0.7-2.7 1.2-4 1.4-1.1-1.2-2.6-1.9-4.4-1.9-1.7 0-3.2 0.6-4.4 1.8-1.2 1.2-1.8 2.7-1.8 4.4 0 0.5 0.1 0.9 0.2 1.3-5.1-0.1-9.4-2.3-12.7-6.4-0.6 1-0.9 2.1-0.9 3.1 0 2.2 1 3.9 2.8 5.2-1.1-0.1-2-0.4-2.8-0.8 0 1.5 0.5 2.8 1.4 4 0.9 1.1 2.1 1.8 3.5 2.1-0.5 0.1-1 0.2-1.6 0.2-0.5 0-0.9 0-1.1-0.1 0.4 1.2 1.1 2.3 2.1 3 1.1 0.8 2.3 1.2 3.6 1.3-2.2 1.7-4.7 2.6-7.6 2.6-0.7 0-1.2 0-1.5-0.1 2.8 1.9 6 2.8 9.5 2.8 3.5 0 6.7-0.9 9.4-2.7 2.8-1.8 4.8-4.1 6.1-6.7 1.3-2.6 1.9-5.3 1.9-8.1v-0.8c1.3-0.9 2.3-2 3.1-3.2-1.1 0.5-2.3 0.8-3.5 1z"></path>
</g>
</svg>
<span class="st-label">Tweet</span>
</div>
<div class="st-btn" data-network="pinterest" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m37.3 20q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3q-2.4 0-4.8-0.7 1.3-2 1.7-3.6 0.2-0.8 1.2-4.7 0.5 0.8 1.7 1.5t2.5 0.6q2.7 0 4.8-1.5t3.3-4.2 1.2-6.1q0-2.5-1.4-4.7t-3.8-3.7-5.7-1.4q-2.4 0-4.4 0.7t-3.4 1.7-2.5 2.4-1.5 2.9-0.4 3q0 2.4 0.8 4.1t2.7 2.5q0.6 0.3 0.8-0.5 0.1-0.1 0.2-0.6t0.2-0.7q0.1-0.5-0.3-1-1.1-1.3-1.1-3.3 0-3.4 2.3-5.8t6.1-2.5q3.4 0 5.3 1.9t1.9 4.7q0 3.8-1.6 6.5t-3.9 2.6q-1.3 0-2.2-0.9t-0.5-2.4q0.2-0.8 0.6-2.1t0.7-2.3 0.2-1.6q0-1.2-0.6-1.9t-1.7-0.7q-1.4 0-2.3 1.2t-1 3.2q0 1.6 0.6 2.7l-2.2 9.4q-0.4 1.5-0.3 3.9-4.6-2-7.5-6.3t-2.8-9.4q0-4.7 2.3-8.6t6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z"></path>
</g>
</svg>
<span class="st-label">Pin</span>
</div>
<div class="st-btn st-last" data-network="linkedin" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m13.3 31.7h-5v-16.7h5v16.7z m18.4 0h-5v-8.9c0-2.4-0.9-3.5-2.5-3.5-1.3 0-2.1 0.6-2.5 1.9v10.5h-5s0-15 0-16.7h3.9l0.3 3.3h0.1c1-1.6 2.7-2.8 4.9-2.8 1.7 0 3.1 0.5 4.2 1.7 1 1.2 1.6 2.8 1.6 5.1v9.4z m-18.3-20.9c0 1.4-1.1 2.5-2.6 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5 2.6 1.2 2.6 2.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
</div>
But when i want to share my page on facebook or linkedin i have problem. The title and the image doesn't display. How i can do this?
Hello i have i blog which get data via ajax request using jquery.
This is not a good design. Not only does it make your site inaccessible to clients which do not run Javascript -- like the tools used by social networking sites to extract page information and graphics! -- but it will also increase the load time of your site, as two HTTP requests must be made to start loading any content.
The problem you are having is inherent to this design. Reconsider it.
Related
I'm trying to get an object from a table with python and selenium. However, first I need to click in the Goalscorers (table title) to show the table. The problem is that I can't click in any of the object, and there isn't any ref. So I can't understand what I need to do, all this div "are clickable" when I put the mouse on top of them, so not sure how it works, any idea?
I tried
driverBet.find_element(By.XPATH,"//div[contains(#data-test-market,'Goalscorers')]").click()
but it's not clickable, I tried also the data-test-id="rabMarkets" but it's not clickable.
<div data-test-id="rabMarkets">
<div class="_ty4a3m">
<div data-test-id="rabMarketsAccordion">
<div class="_1ufbuwwo ">
<div class="_1b7dz8zNaN">
<div class="_q76d6b">
<span class="_uywwi">
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-309" style="fill:#909DB4;height:18px;width:18px;" data-src="//bet.sbgcdn.com/static/assets/7200e23c7ae8f1778ea608e36e92b473.svg" class="injected-svg _uhlm2">
<title id="title-309">
Icon / Toggle / Outlined / Star
</title>
<path fill-rule="nonzero" d="M17.738 20.999a.716.716 0 0 1-.331-.082l-5.408-2.821-5.408 2.821a.717.717 0 0 1-.75-.053.704.704 0 0 1-.284-.692l1.033-5.976-4.375-4.232a.703.703 0 0 1-.18-.725.71.71 0 0 1 .575-.48l6.046-.873L11.36 2.45a.713.713 0 0 1 1.277 0l2.704 5.437 6.046.872a.71.71 0 0 1 .575.481.703.703 0 0 1-.18.725l-4.375 4.232 1.033 5.976a.705.705 0 0 1-.283.692.715.715 0 0 1-.42.135zM5 10l3.5 3.5-1 5 4.499-2.45 4.497 2.45-.996-5L19 10l-4.5-.5c-.155-.022-.988-1.522-2.501-4.5L9.5 9.5 5 10z" role="presentation">
</path>
</svg>
</div>
</div>
</span>
</div>
<div class="_zxe9qt">
<div class="_t0tx82" data-test-market="Goalscorers">Goalscorers</div>
<div class="_1cpli7v"></div></div><div class="_w81afw">
<span class="_uywwi">
<div><div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9" width="15px" height="9px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-1915" style="fill:#909DB4;height:14px;width:14px;" data-src="//bet.sbgcdn.com/static/assets/5c342ef89fd16eb91c0b8ddec4a2dcc0.svg" class="injected-svg _j30eqf _uhlm2">
<title id="title-1915">
icon-arrow-down
</title>
<path transform="translate(7.250000, 5.000000) scale(1, -1) rotate(90.000000) translate(-7.250000, -5.000000)" fill-rule="evenodd" d="m3 5.0033l7-7.0033 0.79289 0.79289c0.39023 0.39065 0.39032 1.0237 2.119e-4 1.4144l-4.7931 4.796 4.7927 4.7898c0.39085 0.3902 0.39104 1.0234 6.357e-4 1.414-7.06e-5 7.07e-5 -1.412e-4 1.413e-4 -4.238e-4 1e-7l-0.79289 0.79289-7-6.9967z" role="presentation"></path>
</svg></div></div></span></div></div></div></div></div></div>
thank you
You can access the element using the class, something like this:
This functions first check if the element with the class exists:
def check_exists_by_class_name(browser, classname):
try:
browser.find_element(By.CLASS_NAME, classname)
except NoSuchElementException:
return False
return True
Then, just use the function:
browser = webdriver.Chrome(service=service, options=options)
if check_exists_by_class_name(browser, '_t0tx82'):
print('Go on')
else:
print('not found')
i have two audio files with progress bar and both having same id:
<audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio>
</p>
<button class="btn btn-success btn-sm" id="play">
<svg style='font-size: 1.3em' class="bi bi-play-fill" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/>
</svg>
</button>
<button class="btn btn-secondary btn-sm" id="pause">
<svg style='font-size: 1.3em' class="bi bi-pause-fill" width="1em" height="1em" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3.5A1.5 1.5 0 017 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zm5 0A1.5 1.5 0 0112 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>
</svg>
</button>
<progress style="height: 4px;border: none;width: 300px;max-width: 330px" id="seekbar" value="0" max="1">ssss
And Here's js
<script type="text/javascript">
$('#play').on('click', function() {
document.getElementById('player'.).play();
});
$('#pause').on('click', function() {
document.getElementById('player').pause();
});
$('#player').on('timeupdate', function() {
$('#seekbar').attr("value", this.currentTime / this.duration);
});
</script>
now i am able to play the first audio file but cannot play second file
how do i do that?????
if there's any other solution like looping ids or anything just tell me because i am a noob in js
document.getElementById only returns the first match, if you want to get all matches, use
document.querySelectorAll instead.
Here's how you should do it
$('#play').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.play());
});
$('#pause').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.pause());
});
As kerbholz mentioned, id should be unique. If it meant to have multiple instances, consider to use class instead.
I'm trying to make a search form. I want it to be like when I click in the search form opener button, the search form would show and its width would be 100%.
When I click it again the search form width would return to 0. The first one is working but when I click it back, the form is not set to width of 0.
app.js :
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(header_search_cont.css("width","0")){
header_search_cont.css("width","100%")
search_box.focus();
header_search_cont.css("opacity","1");
header_search_cont.css("transition","all .2s ease-in-out");
}else if(header_search_cont.css("width","100%")){
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
})
//search ends
<div id="header_search_cont" class="unstreched_search">
<form action="" method="post" name="search_form" id="search_form" enctype="multipart/form-data">
<button type="button" id="search_area_die"><svg id="search_die_svg" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path
d="M501.333,245.333H36.417l141.792-141.792c4.167-4.167,4.167-10.917,0-15.083c-4.167-4.167-10.917-4.167-15.083,0l-160,160c-4.167,4.167-4.167,10.917,0,15.083l160,160c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L36.417,266.667h464.917c5.896,0,10.667-4.771,10.667-10.667S507.229,245.333,501.333,245.333z" />
</g>
</g>
</svg></button>
<input type="search" name="search_box" id="search_box" placeholder="Search..."><button id="searchbtn"
name="searchbtn"><svg class="search_ico_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792zM202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667
S302.646,384,202.667,384z" />
</g>
</g>
</svg></button></form>
</div>
Simple way is to use addClass() and removeClass() functions instead of using .css Then for if statement you can use if($(selector).hasClass())
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(!header_search_cont.hasClass('strech')){ //<< if not hasClass() strech
search_box.focus();
header_search_cont.addClass('strech'); // addClass()
}else{
header_search_cont.removeClass('strech'); // removeClass()
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.removeClass('strech'); //<< removeClass()
})
//search ends
#header_search_cont{
width : 0px;
opacity : 0;
transition : all .2s ease-in-out;
overflow : hidden;
background : red;
padding : 10px;
box-sizing : border-box;
}
#header_search_cont.strech{
width : 100%;
opacity : 1;
transition : all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_right_search_btn">Open Search</div>
<div id="header_search_cont">
<form>
<input id="search_box" type="search" placeholder="search" />
<input id="search_area_die" type="submit" value="search"/>
</form>
</div>
Explanation:
Add/remove class strech to the element on click
Check for strech class by using .hasclass('strech')) . The ! mark means NOT so !$(selector).hasClass('strech') means if the element doesn't have this class
I need to change a backgroundColor of $('.category-edit .type')based on text changing.
i am getting the text from $('.organisation-options .organisation-option')and setting it on $('.category-edit .type').
just i need when the user click on "hotel" for example the div of $('.category-edit .type') changed text to hotel and backgroundColor also
$('.organisation-options .organisation-option').on("click", function(){
$(this).addClass('active').siblings().removeClass('active');
$('.category-edit .type').text($(this).text());
})
<div class="organisation-options">
<div class="organisation-option">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="32" viewBox="0 0 44 30">
<defs>
<path id="t70za" d="M4848.156 965.136c0-3.389 2.77-6.136 6.188-6.136 3.417 0 6.187 2.747 6.187 6.136 0 3.39-2.77 6.137-6.187 6.137-3.418 0-6.188-2.748-6.188-6.137zm27.844 22.5a1.37 1.37 0 0 1-1.375 1.364h-41.25a1.37 1.37 0 0 1-1.375-1.364 1.37 1.37 0 0 1 1.375-1.363h41.25c.76 0 1.375.61 1.375 1.363zm-31.625-6.818c.013-4.513 3.7-8.168 8.25-8.182h3.781c4.551.014 8.237 3.669 8.25 8.182v4.091h-20.28zm16.789-13.599c0-3.033 2.48-5.492 5.538-5.492 3.058 0 5.537 2.46 5.537 5.492 0 3.034-2.479 5.492-5.537 5.492-3.059 0-5.538-2.458-5.538-5.492zm7.383 6.71c4.071.012 7.367 3.282 7.381 7.319v2.297a1.37 1.37 0 0 1-1.375 1.364h-8.178v-5.454c0-1.674-.86-3.232-1.736-4.531a.633.633 0 0 1 .512-.996zm-33.164-6.71c0-3.033 2.479-5.492 5.537-5.492 3.059 0 5.538 2.46 5.538 5.492 0 3.034-2.48 5.492-5.538 5.492-3.058 0-5.537-2.458-5.537-5.492zM4832 983.545v-2.297c.011-4.039 3.308-7.31 7.38-7.323h3.386c.352 0 .704.025 1.052.075a.678.678 0 0 1 .488 1.05c-.825 1.272-1.65 2.785-1.65 4.405v5.454h-9.281a1.37 1.37 0 0 1-1.375-1.364z"></path>
</defs>
<g>
<g transform="translate(-4832 -959)">
<use fill="#769998" xlink:href="#t70za"></use>
</g>
</g>
</svg>
<span>Event agency</span>
</div>
</div>
<div class="buttons category-edit">
<div class="type" id="typeChanges">DMC</div>
</div>
There are a few ways do this. You could perhaps just change the style in jquery by either using an array or maybe adding a class - depends on how many items you have, and how much variety in color you want...
I've used an array in the snippet below (and different colours for each)
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
var myArr1 = ["Apple", "Pear", "Banana", "Avocado" , "Tomato"];
var myArr2 =['#336633', '#000055', "#005533", "#22FF33" , '#005500'];
var myval = $(this).text();
var index = myArr1.indexOf(myval);
$('.category-edit .type').text(myval);
if (myArr1.includes(myval)) {
$('.type').css('background-color', myArr2[index]);
} else {
$('.type').css('background-color', 'yellow');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="organisation-options">
<li class="organisation-option">Apple</li>
<li class="organisation-option">Pear</li>
<li class="organisation-option">Banana</li>
<li class="organisation-option">Avocado</li>
<li class="organisation-option">Tomato</li>
</ul>
<div class="category-edit">
<div class="type"> </div>
</div>
You may need this
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
// if old text is not same as new one, that is if text is changed,
if( $('.category-edit .type').text() !== $(this).text())
$('.category-edit .type').css("background-color", "yellow");
$('.category-edit .type').text($(this).text());
})
I have a problem with Snap.SVG and animation of multiple SVG elements.
I want to change path on hover, but i have many same SVG in html.
HTML:
var svg = $('.svg-wave');
var s = Snap(svg);
var simpleCup = Snap.select('.svg-wave-normal');
var fancyCup = Snap.select('.svg-wave-hover');
var simpleCupPoints = simpleCup.node.getAttribute('d');
var fancyCupPoints = fancyCup.node.getAttribute('d');
svg.mouseenter(function() {
simpleCup.animate({
d: fancyCupPoints
}, 600);
}).mouseleave(function() {
simpleCup.animate({
d: simpleCupPoints
}, 600);
});
svg .svg-wave-hover {opacity: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
<div class="item">
<svg class="svg-wave" width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<path class="svg-wave-normal" d="M108.5,114.8C71.7,114.8,62.7,117,0,117h217C151,117,146.2,114.8,108.5,114.8" fill="#69c6d3"></path>
<path class="svg-wave-hover" d="M108.5,0C71.7,0,62.7,117,0,117h217C151,117,146.2,0,108.5,0" fill="#69c6d3"></path>
</svg>
</div>
The problem is that when i hover last SVG, it animate the first one.
Can someone help me to change mouseenter/leave to work from $(this) ?
I'm going to suggest a way without using JQuery firstly, as it's not really necessary.
I would change your css to make the hover path display: none, rather than opacity: 0, as display none means that events will pass through fine, whereas opacity will capture them. Or you could reorder the paths, so the hove paths come first.
var normalWaves = Snap.selectAll('.svg-wave-normal');
var normalPoints = Snap.select('.svg-wave-normal').attr('d');
var hoverPoints = Snap.select('.svg-wave-hover').attr('d');
normalWaves.forEach(function( wave ) {
wave.mouseover(function() {
this.animate({
d: hoverPoints
}, 600);
})
.mouseout(function() {
this.animate({
d: normalPoints
}, 600);
});
});
svg .svg-wave-hover { display: none; }
jsfiddle