Like when you click to remove objects alternately and continuously with this?

All good day

Decided not to do the sequence of actions

Let's say I have on the page there are pictures, but no names under them (for example as with posts)

And here I want to display those same images in a modal window, but add a span tag with the name and description of the data symbols

Here's an example:

the <div>
 <p class="img"><img src="https://picsum.photos/30">
 <button class="move">Move</button>
</p>
</div>

the <div>
 <p class="img"><img src="https://lorempixel.com/30/30/technics">
 <button class="move">Move</button>
</p>
</div>

<div class="icon-right"><i class="fa fa-tags" aria-hidden="true"></i></div>

<div class="modal">nothing Here</div>


Here is an example code: https://codepen.io/Brad_Kemmer6/pen/Rmzvoa

I need each click to display alternately the image and the name of the object which is in span
March 23rd 20 at 19:34
1 answer
March 23rd 20 at 19:36
Alternatively, you can use this function
var i=0;
customGetElemet function(s){
 var e = $(s+':eq('+i+')');
 if(e.length > 0){
i++;
 return e;
}
 return false;
}

For the next element call function with the proper selector.
For example, for images
var img = customGetElemet('img');
Thanks for the reply!

A question, if the images I take from the page ?
let imgCat = $(this).parent().find('img').attr('src');

But I need to add a span tag with the names (example as cards of goods)

I tried to create new objects:
let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

And as I can in the span tag to supply these names ?

For example I want like this:
the <div><img src="https://picsum.photos/30"><span>Name one</span></div>
the <div><img src="https://lorempixel.com/30/30/technics"><span>Name two</span></div>

And implement it through the constructor:

let Item = function(name) {
 this.name = name;
 }

And in the loop to substitute the name
for (let i in name) {
 modalCat += '<div class="modal-item">'
 modalCat += '<img src="' + imgCat + '">'
 modalCat += '<span class="name-item">' + name[i] + '</span>'
 modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
 modalCat += '</div>';
 }


If it is so difficult to implement ? - Brad_Kemmer6 commented on March 23rd 20 at 19:39
You don't know how this can be something to do ?

PS would appreciate an answer! - Brad_Kemmer6 commented on March 23rd 20 at 19:42
With images everything is clear. You get them from the page.
And where you have stored the names you want to display in a modal window?

Alternatively, you can offer to record the names in the alt attribute or title, and then get their script together with the images. - deshaun.Bogan0 commented on March 23rd 20 at 19:45
@deshaun.Bogan0, something like this: https://codepen.io/anon/pen/KLEOoB

And where you have stored the names you want to display in a modal window?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

And is that the way you can in javascript to create ?

Let's use a loop to Name one substitute in a span tag, and then Name two
the <div><img src="https://picsum.photos/30"><span>Name one</span></div>
the <div><img src="https://lorempixel.com/30/30/technics"><span>Name two</span></div>
- Brad_Kemmer6 commented on March 23rd 20 at 19:48
@deshaun.Bogan0, or nobody does ? - Brad_Kemmer6 commented on March 23rd 20 at 19:51
@Brad_Kemmer6, in that case, how are you going to bind the names to the images? - deshaun.Bogan0 commented on March 23rd 20 at 19:54
@deshaun.Bogan0, well, in the span tag it is possible to expose these objects ?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Maybe you can do something in this example ?

https://jsfiddle.net/TCLoud/wj7cktgo/26/ - Brad_Kemmer6 commented on March 23rd 20 at 19:57
You collect a script from the page all images in a row.
Don't see the connection, "image - name".
You want each picture to make a unique signature? - deshaun.Bogan0 commented on March 23rd 20 at 20:00
@deshaun.Bogan0, Yes, exactly

The names on the page I do not have, but is not in the for loop in to substitute these signature pictures ?
let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Let the pictures and the objects (signatures) push (push) to an array, and then through the loop with the img tags and span to display in the layout ? - Brad_Kemmer6 commented on March 23rd 20 at 20:03
That's what I'm asking.
If you have an array with the addresses and names of images you can work with the array.

For example pictures, and objects to push (push) to an array

Where to push?
You of advance should be spelled out the relationship between images and their names. - deshaun.Bogan0 commented on March 23rd 20 at 20:06
@deshaun.Bogan0, and how to do it ?

An example of how this is possible more correctly to implement ? - Brad_Kemmer6 commented on March 23rd 20 at 20:09
An example of how this is possible more correctly to implement ?

Approximately
var images = new Array(
{
 'url' : '/image-1.jpg',
 'title' : 'Title 1'
},
{
 'url' : '/image-2.jpg',
 'title' : 'Title 2'
}
);

var modalCat = ";
for (let i in images) {
 modalCat += '<div class="modal-item">'
 modalCat += '<img src="' + images[i]['url'] + '" alt="">'
 modalCat += '<span class="name-item">' + images[i]['title'] + '</span>'
 modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
 modalCat += '</div>';
}
- deshaun.Bogan0 commented on March 23rd 20 at 20:12
@deshaun.Bogan0, thank you very much, and if I have pictures on the page ?

Get to associate pictures with new objects not ?

I mean about these:

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

But only pictures you take from the page:
the <div>
 <p class="img"><img src="https://picsum.photos/30">
 <button class="move">Move</button>
</p>
</div>

the <div>
 <p class="img"><img src="https://lorempixel.com/30/30/technics">
 <button class="move">Move</button>
</p>
</div>

let imgCat = $(this).parent().find('img').attr('src');
- Brad_Kemmer6 commented on March 23rd 20 at 20:15
Option two.
1) Specify the name in the alt attribute or title.
2) Can an array of images to create directly on the page, and not to make in the js file. - deshaun.Bogan0 commented on March 23rd 20 at 20:18
@deshaun.Bogan0, well, if I add an image to a page

the <div>
 <p class="img"><img src="https://picsum.photos/30">
 <button class="move">Move</button>
</p>
</div>

the <div>
 <p class="img"><img src="https://lorempixel.com/30/30/technics">
 <button class="move">Move</button>
</p>
</div>

I in a cycle will not be able to add signatures ?
let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

That is: one Name for first image and for second image - Name two - Brad_Kemmer6 commented on March 23rd 20 at 20:21
Well, you'll have to edit the code in the js file each time you add new pictures.
This is the wrong approach. - deshaun.Bogan0 commented on March 23rd 20 at 20:24
@deshaun.Bogan0, and how to add a new object to this.img = img; ?

let imgCat = $(this).parent().find('img').attr('src');

 let Item = function(name, img) {
 this.name = name;
 this.img = img;

console.log(name);
}

 let nameOneItem = new Item('Name one');
 let nameTwoItem = new Item('Name two');
 let imgItem = new Item(imgCat);
- Brad_Kemmer6 commented on March 23rd 20 at 20:27
@deshaun.Bogan0, I need something like this:

https://codepen.io/anon/pen/OYKEwg

But when you click to be added only one element, and the second clique, the second, 3 if you click again the first, etc.? - Brad_Kemmer6 commented on March 23rd 20 at 20:30
@deshaun.Bogan0, but as in your example output for a single item ?

https://codepen.io/Brad_Kemmer6/pen/BgoZKy - Brad_Kemmer6 commented on March 23rd 20 at 20:33

Find more questions by tags HTMLjQueryJavaScript