I have a problem with function based on each loop. I am beginner and I havent find my answer on other topics.
I have function like this:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
idCloudImage = $(".cloud-img img").attr("class");
cloudImage = $(".cloud-img img");
if($(this).attr("id") == idCloudImage) {
var treeImage = $(this).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
}
HTML like this:
<div class="treelist">
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/1.jpg" id="231" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/2.jpg" id="21" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/3.jpg" id="44" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/4.jpg" id="45" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/5.jpg" id="46" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/6.jpg" id="441" class="treeimage"></div>
</div>
</div>
second part HTML:
<div class="say-item cloud">
<div class="cloud-img">
<img src="images/addci.jpg" class="45">
</div>
<div class="cloud-img">
<img src="images/addci.jpg" class="46">
</div>
</div>
JSON like this:
{
"images": [
{
"id": "231",
"uri": "images/1.jpg"
},
{
"id": "21",
"uri": "images/2.jpg"
},
{
"id": "44",
"uri": "images/3.jpg"
},
{
"id": "45",
"uri": "images/4.jpg"
},
{
"id": "46",
"uri": "images/5.jpg"
},
{
"id": "441",
"uri": "images/6.jpg"
}
]
}
second JSON (part) like this:
{
"iconId": "45"
},
{
"iconId": "46"
}
And now. I have add all id's with JSON load using .attr("id") (working correctly). JSON id is in .treelist class and second JSON ("iconId") into selectors in .cloud class.
Now I need to compare them and if id in ".treelist" is the same like id in ".cloud" class I want to give for .cloud img source like is in the same id in .treelist.
I have created function, but it is changing only one (first) element and stops.
I need your help with this because I dont understand why it not working correctly
Thanks, Fantazy
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("id");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}
Please try following code
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var firstId = $(this).attr("id");
$(".cloud-img img").each(function(){
var secondId = $(this).attr("id");
if(firstId == secondId ) {
$(this).attr("src", treeImage);
}
});
});
}
Thanks! vijayP solved my problem ! :)
Urvi - thanks, but Your code not working
Final code:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("class");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}
Related
I am new to javascript, so if this looks terrible I'm sorry.
I've been trying to get my image slideshow to change images every couple of seconds and continue to loop. so far this is what I've got. Any help would be appreciated!
let images = [{
imageUrl: `images/white.png`
},
{
imageUrl: `images/blue.png`
},
{
imageUrl: `images/black.png`
}
]
var showImage = 0;
function slideShow(imageIndex) {
document.getElementById('img1').src = images[imageIndex].imageUrl;
}
function startUp() {
document.getElementById('img1').src = images[showImage].imageUrl;
}
setTimeout(() => {
startUp();
showImage++;
if (showImage == images.length) {
showImage = 0
}
}, 3000)
<section id="TOPPICKS">
<div>
<p class="designshop">SHOP<br> NOW</p>
</div>
<div class="slideshowcontainer">
<div class="imagecontainer">
<img class='slideimage' id="img1">
</div>
</div>
<div>
<p class="designshop">SHOP<br>NOW</p>
</div>
</section>
<section class="xcolor1">
<div class="buttoncontainer">
<a class="slidebutton" onclick="slideShow(0)"></a>
<a class="slidebutton" onclick="slideShow(1)"></a>
<a class="slidebutton" onclick="slideShow(2)"></a>
</div><br><br>
<div>SHOP NOW</div>
</section>
<!-- should put src=firstimage and also width= and height=
Your img1 should be a more sensible name e.g. imageset1
document.getElementById("imageset1").src="http:mysite.wot/somefolder/image0.jpg";
is more how I know it to be, there are other ways
document.getElementById("imageset1").src=images[0];
-->
let images = [
`http:mysite.wot/somefolder/images/white.png`
,
`http:mysite.wot/somefolder/images/blue.png`
,
`http:mysite.wot/somefolder/images/black.png`
];
<img class='slideimage' id="imageset1" onload="startup();" src="http:mysite.wot/somefolder/image0.jpg" width="500" height="300">
I have two html list. One containing text and the other containing images. They all have data attributes. What I want to do is when I click on the text the image will change based the text clicked.
html
<div class="toggle">
<div class="menu">
<ul>
<li class="menu-list t1" data-id="0">R1</li>
<li class="menu-list t2" data-id="1">R2</li>
<li class="menu-list" data-id="2">Shop</li>
<li class="menu-list" data-id="3">Fleet</li>
</ul>
</div>
images
<div class="menu-pictures">
<img class="default" src="default.jpg" alt="">
<img data-id="0" src="r1.jpg" class="p1" alt="">
<img data-id="1" class="p1" src="r1.jpg" alt="">
<img data-id="2" src="shop.jpg" alt="">
<img data-id="3" src="fleet.jpg" alt="">
</div>
</div>
The default class is the default images that shows when the page loads... so the idea is to change the image when the text is being clicked on.
javascript
const menuList = document.querySelectorAll(".menu-list");
let convertList = [...menuList];
const def = document.querySelectorAll(".menu-pictures img");
let convertPictures = [...def];
const images = [
{ name: "0", img: "r1.jpg" },
{ name: "1", img: "r1.jpg" },
{ name: "2", img: "shop.jpg" },
{ name: "3", img: "fleet.jpg" },
];
menuList.forEach((list, e) => {
e.target;
let t = list.getAttribute("data-id");
list.addEventListener("click", function () {
if (images.find((img) => img.name === t)) {
console.log(e)
def[t].src = images[t].img;
console.log("hey");
} else console.log("wrong");
});
});
The idea here is for it to loop through text and get the data attribute and then check if the attribute matches the index of the images, then it will get the scr of the image and replace it with the default image src. But I'm stuck with the implementation
My vue data is
data: function() {
return {
results: {
"items": [
{
"id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
"name": "Gsbssbb",
"price": 9559,
"colour": {
"name": "Blue",
"hex": "FF0000AE"
},
"amountAvailable": 949
},
{
"id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
"name": "Vsbdbdb",
"price": 6559,
"colour": {
"name": "Purple",
"hex": "FF800080"
},
"amountAvailable": 6595
}
],
}
The template is
<div class="column asoebi-list-item" v-for="result in results.items">
<div id="item-event" class="columns is-mobile">
<div class="column auto has-text-left">
<p class="item-name">{{result.name}}</p>
<p class="item-price" id="item-price"> {{result.price}}</p>
<p class="item-units">{{result.amountAvailable}} Units Remaining · {{result.colour.name}}</p>
</div>
<div class="column is-2">
<button id="number-spinner-up" class="o-button button-bottom" type="button" onclick="this.parentNode.querySelector('[type=number]').stepUp();">
+
</button>
<input id="count-input" type="number" name="number" min="0" max="900" v-model="count">
<button id="number-spinner-down" class="o-button button-top" type="button" onclick="this.parentNode.querySelector('[type=number]').stepDown();">
-
</button>
</div>
</div>
</div>
As i loop through each data and display them, How can I add event to hide and un-hide div with number id "number-spinner" class and buttons on each element displayed.
I have this already written, but it only affects the first item even if I click on other items.
let allItems = document.querySelectorAll("#item-event");
for (let i = 0; i <= allItems.length; i++) {
allItems[i].addEventListener("click", () => {
this.toggleSpinner()
});
}
toggleSpinner: function() {
let countInput = document.getElementById("count-input");
countInput.style.visibility = "visible"
let theElementStyle1 = getComputedStyle(document.getElementById("number-spinner-up"));
let theElementStyle2 = getComputedStyle(document.getElementById("number-spinner-down"));
if(theElementStyle1.visibility === "hidden") {
document.getElementById("number-spinner-up").style.visibility = "visible";
}
else {
if(countInput.value === "0") {
countInput.style.visibility = "hidden"
}
document.getElementById("number-spinner-up").style.visibility = "hidden";
}
if(theElementStyle2.visibility === "hidden") {
document.getElementById("number-spinner-down").style.visibility = "visible";
}
else {
if(countInput.value === "0") {
countInput.style.visibility = "hidden"
}
document.getElementById("number-spinner-down").style.visibility = "hidden";
}
},
I just started with vue.. please forgive my sloppyness
It is always better to keep jQuery away from Vue, since it is having its own functionalities to handle most of the requirements.
I'm not clear which div should set for toggle the view. So I added one link to toggle it. Hope this will help.
<div class="column asoebi-list-item" v-for="result in results.items">
<div id="item-event" class="columns is-mobile">
<div class="column auto has-text-left">
<p class="item-name">{{result.name}}</p>
<p class="item-price" id="item-price"> {{result.price}}</p>
<p class="item-units">{{result.amountAvailable}} Units Remaining · {{result.colour.name}}</p>
</div>
<div class="column is-2" v-show="result.active">
<button id="number-spinner-up" class="o-button button-bottom" type="button"
onclick="this.parentNode.querySelector('[type=number]').stepUp();">
+
</button>
<input id="count-input" type="number" name="number" min="0" max="900" v-model="result.count">
<button id="number-spinner-down" class="o-button button-top" type="button"
onclick="this.parentNode.querySelector('[type=number]').stepDown();">
-
</button>
</div>
toggle
</div>
</div>
Also, made some changes to the array results to handle the v-model and toggle functionality
data: () => {
return {
results: {
"items": [
{
"id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
"name": "Gsbssbb",
"price": 9559,
"colour": {
"name": "Blue",
"hex": "FF0000AE"
},
"amountAvailable": 949,
"count": null,
"active": true
},
{
"id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
"name": "Vsbdbdb",
"price": 6559,
"colour": {
"name": "Purple",
"hex": "FF800080"
},
"amountAvailable": 6595,
"count": null,
"active": true
}
],
}
}
},
You are using Vue ! Do Not Focus On Operating The DOM ! You are not using jQuery ! Read Vue DOCs before coding !
I have created an artist(artists.html) page, which includes around 15 artists. Now I am trying to create the profile of each artist through one single HTML file dynamically. So I have created another HTML file(single-artist.html) which will show the profile of an artist clicked by the visitor.
artists.html (Out of 15 artists, below are the two examples)
<div class="all-artist" id="artists">
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="0">
<div>
<a href="artist-single.html">
<img src="img/1.jpg" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="1">
<div>
<a href="artist-single.html">
<img src="img/2.jpg" alt="">
</a>
</div>
</div>
</div>
artist-single.html
<div id="name"></div>
<div id="logo"></div>
<div id="bio"></div>
data.json
[{
"name": "Arsh",
"logo": "img/logo.jpg",
"bio": "Arsh is a singer/songwriter"
},
{
"name": "Benz",
"logo": "img/logo.jpg",
"bio": "Benz is a singer"
}]
main.js
$('#all_artists artist-single').on('click',function(){
window.location.href="artist-single.html";
var num = $(this).data('number');
$.getJSON('data.json',function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
});
Now, when I click on an artist image, it redirects to artist-single.html but it's not fetching values. Maybe because I am redirecting and fetching the values on the same event. Help would be really appreciated.
$(document).ready(function() {
var num = $.cookie('num');
$.getJSON('data.json', function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
$('#artists .artist-single').on('click', function() {
var num = $(this).data('number');
$.cookie('num', num);
window.location.href = "artist-single.html";
});
});
1) When a user clicks an anchor inside div with class='thumbs'
2) I want to automatically update ViewModel's IMAGE_PATH and IMAGE_DESCRIPTION
3) based on clicked thumb THUMB_PATH and THUMB_DESCRIPTION accordingly and update the UI inside div class='containt'
Short Version: I want Containt div always reflect the clicked thumb details.
Can someone please help me or suggest me resources on how to achieve that while using Knockout's Mapping Plugin?
Thanks in advance!
var data= {
"ImagesInfo": [
{
"IMAGE_PATH": "",
"IMAGE_DESCRIPTION": "",
"thumbs": [
{
"thumb_id": "1",
"THUMB_PATH": "url(http://..183.jpg)",
"THUMB_DESCRIPTION":"here is a car",
"type": "sponsor"
},
{
"thumb_id": "2",
"THUMB_PATH": "url(http://..184.jpg)",
"THUMB_DESCRIPTION":"here is a boat",
"type": "img"
},
{
"thumb_id": "3",
"THUMB_PATH": "url(http://..185.jpg)",
"THUMB_DESCRIPTION":"here is a plane",
"type": "video"
}
]
}
]
}
<div id="Images">
<div data-bind="foreach: ViewModelB">
<div class="containt" style="margin-top: 10px;">
<div data-bind="style: { backgroundImage: IMAGE_PATH }"></div>
<div data-bind="html: IMAGE_DESCRIPTION"></div>
<div style="clear: both;"></div>
</div>
<div class="thumbs" style="margin-top: 10px; margin-left: 4px">
<div data-bind="foreach: thumbs">
<a class="thumb" data-bind="style: { backgroundImage: THUMB_PATH }, attr: { id: thumb_id }"></a>
</div>
</div>
</div>
<script>
var ViewModelB = ko.mapping.fromJS(data);
ko.applyBindings(ViewModelB, document.getElementById("Images"))
</script>