switch 7 classes between 7 elements
1
I have 7 <div> with 7 classes and I want to change their classes as I click on each seven <li> with onclick="function".
I wrote this code, is there any simple and better way?
it is a slider and there are 7 phases of seven <div>
<div class="slider">
<div class="sl1"></div>
...
<div class="sl7"></div>
<ul>
<li class="selected" onclick="sli1()"></li>
...
<li onclick="sli7()"></li>
</ul>
</div>
and this is Jquery code
function sli1() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(0)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl1");
$(".slider>div:eq(1)").addClass("sl2");
$(".slider>div:eq(2)").addClass("sl3");
$(".slider>div:eq(3)").addClass("sl4");
$(".slider>div:eq(4)").addClass("sl5");
$(".slider>div:eq(5)").addClass("sl6");
$(".slider>div:eq(6)").addClass("sl7");
slideNum = 1;
}
function sli2() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(1)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl2");
$(".slider>div:eq(1)").addClass("sl3");
$(".slider>div:eq(2)").addClass("sl4");
$(".slider>div:eq(3)").addClass("sl5");
$(".slider>div:eq(4)").addClass("sl6");
$(".slider>div:eq(5)").addClass("sl7");
$(".slider>div:eq(6)").addClass("sl1");
slideNum = 2;
}
... continue to
function sli7() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(6)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl7");
$(".slider>div:eq(1)").addClass("sl1");
$(".slider>div:eq(2)").addClass("sl2");
$(".slider>div:eq(3)").addClass("sl3");
$(".slider>div:eq(4)").addClass("sl4");
$(".slider>div:eq(5)").addClass("sl5");
$(".slider>div:eq(6)").addClass("sl6");
slideNum = 7;
}
jquery html css class webforms
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
add a comment |
1
I have 7 <div> with 7 classes and I want to change their classes as I click on each seven <li> with onclick="function".
I wrote this code, is there any simple and better way?
it is a slider and there are 7 phases of seven <div>
<div class="slider">
<div class="sl1"></div>
...
<div class="sl7"></div>
<ul>
<li class="selected" onclick="sli1()"></li>
...
<li onclick="sli7()"></li>
</ul>
</div>
and this is Jquery code
function sli1() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(0)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl1");
$(".slider>div:eq(1)").addClass("sl2");
$(".slider>div:eq(2)").addClass("sl3");
$(".slider>div:eq(3)").addClass("sl4");
$(".slider>div:eq(4)").addClass("sl5");
$(".slider>div:eq(5)").addClass("sl6");
$(".slider>div:eq(6)").addClass("sl7");
slideNum = 1;
}
function sli2() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(1)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl2");
$(".slider>div:eq(1)").addClass("sl3");
$(".slider>div:eq(2)").addClass("sl4");
$(".slider>div:eq(3)").addClass("sl5");
$(".slider>div:eq(4)").addClass("sl6");
$(".slider>div:eq(5)").addClass("sl7");
$(".slider>div:eq(6)").addClass("sl1");
slideNum = 2;
}
... continue to
function sli7() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(6)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl7");
$(".slider>div:eq(1)").addClass("sl1");
$(".slider>div:eq(2)").addClass("sl2");
$(".slider>div:eq(3)").addClass("sl3");
$(".slider>div:eq(4)").addClass("sl4");
$(".slider>div:eq(5)").addClass("sl5");
$(".slider>div:eq(6)").addClass("sl6");
slideNum = 7;
}
jquery html css class webforms
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
2
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29
add a comment |
1
1
1
I have 7 <div> with 7 classes and I want to change their classes as I click on each seven <li> with onclick="function".
I wrote this code, is there any simple and better way?
it is a slider and there are 7 phases of seven <div>
<div class="slider">
<div class="sl1"></div>
...
<div class="sl7"></div>
<ul>
<li class="selected" onclick="sli1()"></li>
...
<li onclick="sli7()"></li>
</ul>
</div>
and this is Jquery code
function sli1() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(0)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl1");
$(".slider>div:eq(1)").addClass("sl2");
$(".slider>div:eq(2)").addClass("sl3");
$(".slider>div:eq(3)").addClass("sl4");
$(".slider>div:eq(4)").addClass("sl5");
$(".slider>div:eq(5)").addClass("sl6");
$(".slider>div:eq(6)").addClass("sl7");
slideNum = 1;
}
function sli2() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(1)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl2");
$(".slider>div:eq(1)").addClass("sl3");
$(".slider>div:eq(2)").addClass("sl4");
$(".slider>div:eq(3)").addClass("sl5");
$(".slider>div:eq(4)").addClass("sl6");
$(".slider>div:eq(5)").addClass("sl7");
$(".slider>div:eq(6)").addClass("sl1");
slideNum = 2;
}
... continue to
function sli7() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(6)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl7");
$(".slider>div:eq(1)").addClass("sl1");
$(".slider>div:eq(2)").addClass("sl2");
$(".slider>div:eq(3)").addClass("sl3");
$(".slider>div:eq(4)").addClass("sl4");
$(".slider>div:eq(5)").addClass("sl5");
$(".slider>div:eq(6)").addClass("sl6");
slideNum = 7;
}
jquery html css class webforms
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
I have 7 <div> with 7 classes and I want to change their classes as I click on each seven <li> with onclick="function".
I wrote this code, is there any simple and better way?
it is a slider and there are 7 phases of seven <div>
<div class="slider">
<div class="sl1"></div>
...
<div class="sl7"></div>
<ul>
<li class="selected" onclick="sli1()"></li>
...
<li onclick="sli7()"></li>
</ul>
</div>
and this is Jquery code
function sli1() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(0)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl1");
$(".slider>div:eq(1)").addClass("sl2");
$(".slider>div:eq(2)").addClass("sl3");
$(".slider>div:eq(3)").addClass("sl4");
$(".slider>div:eq(4)").addClass("sl5");
$(".slider>div:eq(5)").addClass("sl6");
$(".slider>div:eq(6)").addClass("sl7");
slideNum = 1;
}
function sli2() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(1)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl2");
$(".slider>div:eq(1)").addClass("sl3");
$(".slider>div:eq(2)").addClass("sl4");
$(".slider>div:eq(3)").addClass("sl5");
$(".slider>div:eq(4)").addClass("sl6");
$(".slider>div:eq(5)").addClass("sl7");
$(".slider>div:eq(6)").addClass("sl1");
slideNum = 2;
}
... continue to
function sli7() {
$(".slider>ul>li").removeClass();
$(".slider>ul>li:eq(6)").addClass("selected");
$(".slider>div").removeClass();
$(".slider>div:eq(0)").addClass("sl7");
$(".slider>div:eq(1)").addClass("sl1");
$(".slider>div:eq(2)").addClass("sl2");
$(".slider>div:eq(3)").addClass("sl3");
$(".slider>div:eq(4)").addClass("sl4");
$(".slider>div:eq(5)").addClass("sl5");
$(".slider>div:eq(6)").addClass("sl6");
slideNum = 7;
}
jquery html css class webforms
jquery html css class webforms
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
asked Nov 24 '18 at 0:14
Armin EslamiArmin Eslami
135
135
2
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29
add a comment |
2
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29
2
2
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454120%2fswitch-7-classes-between-7-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454120%2fswitch-7-classes-between-7-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
I am pretty sure if you describe the initial requirement (instead of describing your solution) we will find an easier way without having to deal with all these classes and all these functions
– Temani Afif
Nov 24 '18 at 0:17
it's slider with 7 slides with 7 different position and dots below. I want to click dots and switch classes between divs so all slides go to their next position like .fade slick slider
– Armin Eslami
Nov 24 '18 at 10:25
And this is not the way to do, I am problaly you already saw such slider before, so you can check how the work and get better idea ... what if tomorrow you will make them 8 slider? it will be insane to adjust.
– Temani Afif
Nov 24 '18 at 10:29