Jquery function to get text and change div style accordingly
I'm trying to get the number in div (generated by server) and make changes to div accordingly (so basically if number is >=4 progress bar would be green with the title 'superb', if >=3 <4, orange progress bar with the title 'good' etc..).
js:
var scores = $("div.progress-bar");
function progressbar_function()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if(parseInt($(this).text()) >= 3)
$(this).addClass("bg-warning");
$(this).text('Good');
;
$.each(scores, function(index, item)
$(item).change(progressbar_function);
);
html
<ul class="list-group festival-list">
<li class="list-group-item">
<span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio vegan_friendly_avg 5 100 %%" aria-valuenow="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">vegan_friendly_avg</div>
</div>
</li>
<li class="list-group-item">
<span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio coffea_quality_avg 5 100 %%" aria-valuenow="coffea_quality_avg" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>
It doesn't work, what am I doing wrong? :(
javascript jquery bootstrap-4
add a comment |
I'm trying to get the number in div (generated by server) and make changes to div accordingly (so basically if number is >=4 progress bar would be green with the title 'superb', if >=3 <4, orange progress bar with the title 'good' etc..).
js:
var scores = $("div.progress-bar");
function progressbar_function()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if(parseInt($(this).text()) >= 3)
$(this).addClass("bg-warning");
$(this).text('Good');
;
$.each(scores, function(index, item)
$(item).change(progressbar_function);
);
html
<ul class="list-group festival-list">
<li class="list-group-item">
<span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio vegan_friendly_avg 5 100 %%" aria-valuenow="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">vegan_friendly_avg</div>
</div>
</li>
<li class="list-group-item">
<span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio coffea_quality_avg 5 100 %%" aria-valuenow="coffea_quality_avg" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>
It doesn't work, what am I doing wrong? :(
javascript jquery bootstrap-4
note you have>= 4
for both if / else if conditions
– Patrick Evans
Nov 14 '18 at 17:55
you have the same statement in your else block. Change the >= comparison.else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on theprogressbar_function
like this$(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03
add a comment |
I'm trying to get the number in div (generated by server) and make changes to div accordingly (so basically if number is >=4 progress bar would be green with the title 'superb', if >=3 <4, orange progress bar with the title 'good' etc..).
js:
var scores = $("div.progress-bar");
function progressbar_function()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if(parseInt($(this).text()) >= 3)
$(this).addClass("bg-warning");
$(this).text('Good');
;
$.each(scores, function(index, item)
$(item).change(progressbar_function);
);
html
<ul class="list-group festival-list">
<li class="list-group-item">
<span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio vegan_friendly_avg 5 100 %%" aria-valuenow="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">vegan_friendly_avg</div>
</div>
</li>
<li class="list-group-item">
<span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio coffea_quality_avg 5 100 %%" aria-valuenow="coffea_quality_avg" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>
It doesn't work, what am I doing wrong? :(
javascript jquery bootstrap-4
I'm trying to get the number in div (generated by server) and make changes to div accordingly (so basically if number is >=4 progress bar would be green with the title 'superb', if >=3 <4, orange progress bar with the title 'good' etc..).
js:
var scores = $("div.progress-bar");
function progressbar_function()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if(parseInt($(this).text()) >= 3)
$(this).addClass("bg-warning");
$(this).text('Good');
;
$.each(scores, function(index, item)
$(item).change(progressbar_function);
);
html
<ul class="list-group festival-list">
<li class="list-group-item">
<span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio vegan_friendly_avg 5 100 %%" aria-valuenow="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">vegan_friendly_avg</div>
</div>
</li>
<li class="list-group-item">
<span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: % widthratio coffea_quality_avg 5 100 %%" aria-valuenow="coffea_quality_avg" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>
It doesn't work, what am I doing wrong? :(
javascript jquery bootstrap-4
javascript jquery bootstrap-4
edited Nov 14 '18 at 18:02
Or Preiss
asked Nov 14 '18 at 17:53
Or PreissOr Preiss
197
197
note you have>= 4
for both if / else if conditions
– Patrick Evans
Nov 14 '18 at 17:55
you have the same statement in your else block. Change the >= comparison.else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on theprogressbar_function
like this$(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03
add a comment |
note you have>= 4
for both if / else if conditions
– Patrick Evans
Nov 14 '18 at 17:55
you have the same statement in your else block. Change the >= comparison.else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on theprogressbar_function
like this$(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03
note you have
>= 4
for both if / else if conditions– Patrick Evans
Nov 14 '18 at 17:55
note you have
>= 4
for both if / else if conditions– Patrick Evans
Nov 14 '18 at 17:55
you have the same statement in your else block. Change the >= comparison.
else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on the progressbar_function
like this $(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
you have the same statement in your else block. Change the >= comparison.
else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on the progressbar_function
like this $(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03
add a comment |
2 Answers
2
active
oldest
votes
try this
$(function ()
$("div.progress-bar").each(function ()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-warning");
$(this).text('Good');
);
);
https://jsfiddle.net/x1yhctad/3/
add a comment |
var scores = $("div.progress-bar");
function progressbar_function($item)
if (parseInt($item.text()) >= 4)
$item.addClass("bg-success");
$item.text('Superb');
else if (parseInt($(this).text()) >= 3)
$item.addClass("bg-warning");
$item.text('Good');
;
$.each(scores, function (index, item)
progressbar_function($(item));
);
This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
add a comment |
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
);
);
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%2f53306129%2fjquery-function-to-get-text-and-change-div-style-accordingly%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
try this
$(function ()
$("div.progress-bar").each(function ()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-warning");
$(this).text('Good');
);
);
https://jsfiddle.net/x1yhctad/3/
add a comment |
try this
$(function ()
$("div.progress-bar").each(function ()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-warning");
$(this).text('Good');
);
);
https://jsfiddle.net/x1yhctad/3/
add a comment |
try this
$(function ()
$("div.progress-bar").each(function ()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-warning");
$(this).text('Good');
);
);
https://jsfiddle.net/x1yhctad/3/
try this
$(function ()
$("div.progress-bar").each(function ()
if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-success");
$(this).text('Superb');
else if (parseInt($(this).text()) >= 4)
$(this).addClass("bg-warning");
$(this).text('Good');
);
);
https://jsfiddle.net/x1yhctad/3/
edited Nov 14 '18 at 19:06
Love Buddha
907
907
answered Nov 14 '18 at 18:12
Mahmoud SharifMahmoud Sharif
464
464
add a comment |
add a comment |
var scores = $("div.progress-bar");
function progressbar_function($item)
if (parseInt($item.text()) >= 4)
$item.addClass("bg-success");
$item.text('Superb');
else if (parseInt($(this).text()) >= 3)
$item.addClass("bg-warning");
$item.text('Good');
;
$.each(scores, function (index, item)
progressbar_function($(item));
);
This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
add a comment |
var scores = $("div.progress-bar");
function progressbar_function($item)
if (parseInt($item.text()) >= 4)
$item.addClass("bg-success");
$item.text('Superb');
else if (parseInt($(this).text()) >= 3)
$item.addClass("bg-warning");
$item.text('Good');
;
$.each(scores, function (index, item)
progressbar_function($(item));
);
This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
add a comment |
var scores = $("div.progress-bar");
function progressbar_function($item)
if (parseInt($item.text()) >= 4)
$item.addClass("bg-success");
$item.text('Superb');
else if (parseInt($(this).text()) >= 3)
$item.addClass("bg-warning");
$item.text('Good');
;
$.each(scores, function (index, item)
progressbar_function($(item));
);
This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.
var scores = $("div.progress-bar");
function progressbar_function($item)
if (parseInt($item.text()) >= 4)
$item.addClass("bg-success");
$item.text('Superb');
else if (parseInt($(this).text()) >= 3)
$item.addClass("bg-warning");
$item.text('Good');
;
$.each(scores, function (index, item)
progressbar_function($(item));
);
This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.
answered Nov 14 '18 at 18:11
Ukesh ShresthaUkesh Shrestha
73
73
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
add a comment |
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
tried to trigger by document ready, didn't work.
– Or Preiss
Nov 14 '18 at 18:20
add a comment |
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.
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%2f53306129%2fjquery-function-to-get-text-and-change-div-style-accordingly%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
note you have
>= 4
for both if / else if conditions– Patrick Evans
Nov 14 '18 at 17:55
you have the same statement in your else block. Change the >= comparison.
else if(parseInt($(this).text()) >= 4)
If it still doesn't work try binding the item on theprogressbar_function
like this$(item).change(progressbar_function.bind(item));
– Charis Theo
Nov 14 '18 at 17:59
Sry my bad when copied here.The second statement is >=3, still doesn't work.
– Or Preiss
Nov 14 '18 at 18:03