Jquery function to get text and change div style accordingly










0















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">floatformat:2</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="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>


It doesn't work, what am I doing wrong? :(










share|improve this question
























  • 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












  • Sry my bad when copied here.The second statement is >=3, still doesn't work.

    – Or Preiss
    Nov 14 '18 at 18:03















0















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">floatformat:2</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="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>


It doesn't work, what am I doing wrong? :(










share|improve this question
























  • 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












  • Sry my bad when copied here.The second statement is >=3, still doesn't work.

    – Or Preiss
    Nov 14 '18 at 18:03













0












0








0








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">floatformat:2</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="default_if_none:"No reviews yet"" aria-valuemin="0" aria-valuemax="5">coffea_quality_avg</div>
</div>
</li>
.
.
.
</ul>


It doesn't work, what am I doing wrong? :(










share|improve this question
















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">floatformat:2</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="default_if_none:"No reviews yet"" 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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 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

















  • 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












  • 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












2 Answers
2






active

oldest

votes


















1














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/






share|improve this answer
































    0














    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.






    share|improve this answer























    • tried to trigger by document ready, didn't work.

      – Or Preiss
      Nov 14 '18 at 18:20










    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


















    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









    1














    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/






    share|improve this answer





























      1














      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/






      share|improve this answer



























        1












        1








        1







        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/






        share|improve this answer















        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/







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 14 '18 at 19:06









        Love Buddha

        907




        907










        answered Nov 14 '18 at 18:12









        Mahmoud SharifMahmoud Sharif

        464




        464























            0














            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.






            share|improve this answer























            • tried to trigger by document ready, didn't work.

              – Or Preiss
              Nov 14 '18 at 18:20















            0














            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.






            share|improve this answer























            • tried to trigger by document ready, didn't work.

              – Or Preiss
              Nov 14 '18 at 18:20













            0












            0








            0







            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.






            share|improve this answer













            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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            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

















            • 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

















            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














            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





















































            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







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

            Museum of Modern and Contemporary Art of Trento and Rovereto