Like when you click to display the new objects with this?

Good evening everyone!

Actually a question how to bring the objects alternately in a certain place on the website ?

Here's an example:

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

nameItem function(name) {
 this.template = $('<span>' + name + '</br>' + '</span>');
$('div').append(this.template);
}

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

More clearly: https://codepen.io/Beth.Hetting/pen/vwPqZP

In this embodiment, I have displayed the whole thing, but as with a variable this is the output one by one, when I click the button ?
March 23rd 20 at 19:04
2 answers
March 23rd 20 at 19:06
Solution
Yes, thank you )

And in this example, display span, if I don't have it on the page ?

https://codepen.io/Beth.Hetting/pen/eajaQo

And can you even bring such an object cycle ? - Beth.Hetting commented on March 23rd 20 at 19:09
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);
- Beth.Hetting commented on March 23rd 20 at 19:12
@Beth.Hetting, where to add?

let's take an example on codepen explaining what you need to do will be understand - jerald.Morissette91 commented on March 23rd 20 at 19:15
@jerald.Morissette91, here's an example: https://codepen.io/Beth.Hetting/pen/Rmzvoa

Can I link pictures with objects ?

To say it was so ?
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>
- Beth.Hetting commented on March 23rd 20 at 19:18
@Beth.Hetting, right? - jerald.Morissette91 commented on March 23rd 20 at 19:21
@jerald.Morissette91, Yes, thank You very much
But how to make that at a clique to be added only one element, and the second clique, the second, 3 if you click again the first, etc.? - Beth.Hetting commented on March 23rd 20 at 19:24
@Beth.Hetting, https://codepen.io/anon/pen/OYKEwg - jerald.Morissette91 commented on March 23rd 20 at 19:27
@jerald.Morissette91, cool, I thought harder )

And using chicle for to get rid of this option be ?

And somewhere with the logic that if the violations, if when you boot, immediately press the 2 button, it shows me the name of one, and how to make that name two ?
Thanks in advance ! - Beth.Hetting commented on March 23rd 20 at 19:30
@jerald.Morissette91, is it difficult to implement this behavior ?

PS always Say when you click on the second button - display name two - Beth.Hetting commented on March 23rd 20 at 19:33
@Beth.Hetting, as I understand it, each button has a corresponding object, then the object's index in the items array can be stored in data attribute of the button

https://codepen.io/anon/pen/XLrJKp?editors=1010 - jerald.Morissette91 commented on March 23rd 20 at 19:36
@jerald.Morissette91, and it is impossible to make the type right ?
const Item = function(id, name, img) {
 this.id = id;
 this.name = name;
 this.img = img;
}

const items = [
 new Item(0, 'Name one', src),
 new Item(1, 'Name two', src)
 ];
- Beth.Hetting commented on March 23rd 20 at 19:39
@Beth.Hetting, it doesn't make sense, these objects still have to be stored in the array through which it is easier to index - jerald.Morissette91 commented on March 23rd 20 at 19:42
@jerald.Morissette91, and without data-attributes in this case can not do ? - Beth.Hetting commented on March 23rd 20 at 19:45
@Beth.Hetting, will have to get out the most perverse ways, data-attributes are the easiest option here, than they don't fit? - jerald.Morissette91 commented on March 23rd 20 at 19:48
@jerald.Morissette91, thanks for the reply, the thing is that I would like to know how is it in practice doing

Because the new objects must using full OOP chased ? - Beth.Hetting commented on March 23rd 20 at 19:51
@Beth.Hetting, and do, the item is associated with any entity using data-attributes - jerald.Morissette91 commented on March 23rd 20 at 19:54
@jerald.Morissette91, thanks for the great explanation !

And here still such question, whether it is possible within the object to declare a new object ?

let arr = [
 {nameOneItem : new Item('Name one', imgCat)},
 {nameTwoItem : new Item('Name two', imgCat)}
];
- Beth.Hetting commented on March 23rd 20 at 19:57
@Beth.Hetting, you can, nobody forbids - jerald.Morissette91 commented on March 23rd 20 at 20:00
@jerald.Morissette91, and then how to use it ?

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

let arr = [
 {nameOneItem : new Item('Name one', imgCat)},
 {nameTwoItem : new Item('Name two', imgCat)}
];
- Beth.Hetting commented on March 23rd 20 at 20:03
@Beth.Hetting, arr[0].nameOneItem - jerald.Morissette91 commented on March 23rd 20 at 20:06
@jerald.Morissette91, thank you, I will train )

But in practice, most object in the array to invest, or just work with the object ?

I understand that with the array easier to work with ? - Beth.Hetting commented on March 23rd 20 at 20:09
@Beth.Hetting, simply with the object

I understand that with the array easier to work with ?

easier than what? - jerald.Morissette91 commented on March 23rd 20 at 20:12
@jerald.Morissette91, well, I meant that in the array you can add, edit and delete data - Beth.Hetting commented on March 23rd 20 at 20:15
@jerald.Morissette91, and could throw the second example, where I wrote:

And somewhere with the logic that if the violations, if when you boot, immediately press the 2 button, it shows me the name of one, and how to make that name two ?
Thanks in advance !

That is one example where no data attributes, and the logic is broken

Now at this link: https://codepen.io/anon/pen/OYKEwg an example of using data-attributes

Thanks in advance, while I wanted to poravnati through the console - Beth.Hetting commented on March 23rd 20 at 20:18
@Beth.Hetting, https://codepen.io/anon/pen/OYKEwg

here the first button in the DOM structure corresponds to the first object, etc. - jerald.Morissette91 commented on March 23rd 20 at 20:21
@jerald.Morissette91, Yes, I understand that this is the correct option

You threw off this option: https://codepen.io/Beth.Hetting/pen/oRKMNL

And then you altered the second version to clicking, there was only one item, but clicking on the second button pop out one Name, I still wrote, saying:

And somewhere with the logic that if the violations, if when you boot, immediately press the 2 button, it shows me the name of one, and how to make that name two ?
Thanks in advance !


And the third (last) option like this: https://codepen.io/anon/pen/OYKEwg - Beth.Hetting commented on March 23rd 20 at 20:24
@jerald.Morissette91, so you have saved for the second option ?

There was a case currentIndex = 0; - Beth.Hetting commented on March 23rd 20 at 20:27
@Beth.Hetting, apparently not saved, I kept the existing pins

P. S. our dialog is already too large, so as not to clog the comments, PM VK https://vk.com/sasha_bakarov - jerald.Morissette91 commented on March 23rd 20 at 20:30
March 23rd 20 at 19:08
Solution
Actually using ES6 can make your code very beautiful. So catch the solution
Thank you very much
But if I don't need input ?

Let's say I have these objects

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

And can I use zilka alternately output the objects on button click?

https://codepen.io/anon/pen/KLEOoB - Beth.Hetting commented on March 23rd 20 at 19:11
@Beth.Hetting, input, need to just have a name to ask. If you want you can generate the name, or it will always default to "Default item". So, Yes, use a loop to simply create elements as necessary, and take them out.

PS: can't see your code, I even codepen raditsa endlessly, don't want to deal with this. You can look at fidle your code. - yessenia_Windl commented on March 23rd 20 at 19:14
@yessenia_Windl, here:

const icon = $('.icon-right');
const modal = $('.modal');

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

nameItem function(name) {
 $('.move').click(function() {
 let imgCat = $(this).parent().find('img').attr('src');

 let modalCat = ";

 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 ($('.move').is(this)) {
 if (!modal.children().is('.modal-item')) modal.text('Catalog');
 } else {
 modal.removeClass('show-item').text('nothing Here');
}

modal.addClass('modal-open').append(modalCat);

 setTimeout(function() {
$('.modal-item').addClass('show-item');
 }, 80);
})
}

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

I need the span tag alternately in the cycle display data objects
let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

modalCat += '<span class="name-item">' + name[i] + '</span>'
- Beth.Hetting commented on March 23rd 20 at 19:17
@Beth.Hetting, here is the solution. It certainly works, and there already where you want to push data, even in span, at least in div. I think this is a fairly obvious solution. - yessenia_Windl commented on March 23rd 20 at 19:20
@Beth.Hetting, I would still advised to learn the syntax of ES6. You a lot of interesting things to discover. And with classes as you can see in ES6 to work nicer(clearer) - yessenia_Windl commented on March 23rd 20 at 19:23
@yessenia_Windl, here: https://jsfiddle.net/Beth.Hetting/kf029zqh/
As in the loop display ?

Or you want to create the PLO ? - Beth.Hetting commented on March 23rd 20 at 19:26
@Beth.Hetting, there is a good cycle Array.forEach() or .map(). In my answer you can see how it works .map().

Yes, it is necessary to do OOP, so it will be easier to work with data. Do not have to create a class, you simply create an object to store the data, and based on its data output the desired html.

Due to the fact that you have all sploshnyakom written, it is not entirely clear where and what to display. - yessenia_Windl commented on March 23rd 20 at 19:29
@yessenia_Windl, I need to display in a modal window here:

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>';
 }

modalCat += '<span class="name-item">' + name[i] + '</span>'

Under the name[i] alternately, substitute: Name one and Name two
let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Just for 2 objects to do OOP ? - Beth.Hetting commented on March 23rd 20 at 19:32
@Beth.Hetting, for the sake of so as not to create bad habits. Even tests not written to the knee. - yessenia_Windl commented on March 23rd 20 at 19:35
@yessenia_Windl, good day

But if I need to alternately and continuously output the object by clicking ?

How this can be done through the return or ? - Beth.Hetting commented on March 23rd 20 at 19:38
@Beth.Hetting, set it as a new question. I'm there to answer it. - yessenia_Windl commented on March 23rd 20 at 19:41
@yessenia_Windl, created a new subject: Question
PS I changed the example, maybe it will be clearer ... - Beth.Hetting commented on March 23rd 20 at 19:44
@yessenia_Windlwill not help ? - Beth.Hetting commented on March 23rd 20 at 19:47

Find more questions by tags jQuery