increment class value onclick javascript

Question

im trying to increment class value on click. how can i achieve this using this code? http://jsfiddle.net/P9C7E/29/

Generate New Div

 <div class="container">
<div data-bind="foreach:items" class="fix_backround">
<div href="#" class="item" data-bind="draggable:true,droppable:true">
    <span data-bind="click:$parent.remove">[x]</span><br/><br/>
    <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>

is it even possible to increment class="item" example class="item1" item2 item 3 exc increment by one every time draggable is created

Everytime a draggable gets created the element goes through the binding handler, so I guess you could add the classes there. You could define a counter variable outside of the handler and increment each time `init` gets called and assign the class. — DonovanM, May 19 '16 at 01:24
Just added an example as an answer. Worked for me on your fiddle. — DonovanM, May 19 '16 at 01:32

DonovanM · Accepted Answer · 2016-05-19T02:43:24.703

1

You could do something like this to add 'item1', 'item2', etc. for each draggable added.

var count = 1;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
        $(element).addClass('item' + count);
        count++;
    }
};

(Just keep in mind that since you're already using an MV* framework, you most likely can avoid having to do things like enumerate classes)

Edit: For selecting a draggable and changing its properties it would go something like:

var count = 1;
var selectedDraggable;

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
        $(element).addClass('item' + count);
        count++;
        $(element).on('click', function () {
            selectedDraggable = $(this);
        })
    }
};

Then later on:

$("#fs").change(function() {
    //alert($(this).val());
    selectedDraggable.css("font-family", $(this).val());

});

$("#size").change(function() {
    selectedDraggable.css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    selectedDraggable.css("color", $(this).attr('data-color'));
});

edited May 19 '16 at 02:43

answered May 19 '16 at 01:32

DonovanM

1,174
1
12
17

one last thing im new at this im not getting the same results here is my https://jsfiddle.net/barronfidel7/kh4td8vn/ i want to be able to change color size and font – fidel May 19 '16 at 01:53
1

You did. And your fiddle works for me - the color, size and font changes. – DonovanM May 19 '16 at 02:01
im sorry i didnt explain myself correctly what i want is to change text and font size individually to each draggable lets say i have 3 draggables i want to be able to change them each different not all together i am really sorry for taking your time i would understand if you dont want to help me – fidel May 19 '16 at 02:06
1

No worries :) The way you have it now you're selecting all the draggables with `$('.item')` so the changes are happening to all of them. Is there are certain way you want the user to be able to select the draggable they want to change or is it just the most recently created one? – DonovanM May 19 '16 at 02:14
select the draggable they want to change one at a time – fidel May 19 '16 at 02:16
Edited the answer above. At first I accidentally submitted in the middle of editing in case you saw the previous edit heh. – DonovanM May 19 '16 at 02:24
1

thank you very much i really appreciate your fine work thank you – fidel May 19 '16 at 02:47
1

Glad to have helped! – DonovanM May 19 '16 at 02:55
@RachelGallen the code works perfectly fine. It was meant to replace some of the code in fidel's fiddle - http://jsfiddle.net/P9C7E/29/ - not to be used by itself. Also, I don't see where you posted an answer?? – DonovanM May 19 '16 at 13:27
@DonovanM initially his code was insertiing the divs twice, even when he removed one of the item divs the single div was duplicating. It's here http://stackoverflow.com/questions/37305953/input-text-is-being-displayed-double-in-divs/37315183#37315183 I posted the link as a comment 18 hours ago I posted it as an answer tho later – Rachel Gallen May 19 '16 at 13:33
@DonovanM note the comment on this one too http://stackoverflow.com/questions/37309589/increment-class-onclick-javascript – Rachel Gallen May 19 '16 at 13:35
@DonovanM oh, and by the way, I have 680 answers, any of which he could have upvoted. I am 1 vote away from my javascript tag badge. Like, he could have shown a little gratitude! – Rachel Gallen May 19 '16 at 13:50
Ahh, I see now. I'm on mobile right now but I'll post a working fiddle as soon as I can. – DonovanM May 19 '16 at 14:15
@RachelGallen here's a working fiddle - https://jsfiddle.net/kh4td8vn/1/ . You have to click on a div before changing its colors, size or font. – DonovanM May 19 '16 at 14:56
@DonovanM just saw that you were on your mobile, not so weird now – Rachel Gallen May 19 '16 at 15:20

increment class value onclick javascript

1 Answers1