Définir l'élément de bascule sur 'on' ou 'off' valeur donnée dans le tableau HTML avec jQuery

Je dois modifier la façon dont un élément bascule HTML/CSS/jQuery affiche - à "OUI" ou "NON" - en fonction de la valeur d'une cellule dans une table.Définir l'élément de bascule sur 'on' ou 'off' valeur donnée dans le tableau HTML avec jQuery

La fonctionnalité nécessaire est:

Si la cellule de table a le texte qui dit « oui » l'élément à bascule doit avoir une classe de .off et définir l'attribut checked de la case à true ou cochée. Si la cellule a un texte qui indique "non", l'élément à bascule doit avoir une classe de .on et définir l'attribut coché de la case à cocher false ou non cochée.

Voici mon code à ce jour:

// TRIM FUNCTION 
 
if (typeof String.prototype.trim !== 'function') { 
 
    String.prototype.trim = function() { 
 
     return this.replace(/^\s+|\s+$/g, ''); 
 
    } 
 
} 
 

 
// TOGGLE FUNCTIONALITY 
 
$(document).ready(function() { 
 

 
    // FIND DEV YES/NO INPUT & CHECK VALUE 
 
    var ynCell = $("td.yn"); 
 
    $(ynCell).each(function() { 
 
     var ynValue = $(ynCell).text().toLowerCase().trim(); 
 
     // IF VALUE = NO, DISPLAY TOGGLE CLASS 'ON' 
 
     // IF VALUE = YES, DISPLAY TOGGLE CLASS 'OFF' 
 
     if (ynValue.indexOf('no') != -1) { 
 
      $(".switch").parent().find('input:checkbox').attr('checked', false); 
 
      $(".switch").removeClass('off').addClass('on'); 
 
     } else if (ynValue.indexOf('yes') != -1) { 
 
      $(".switch").parent().find('input:checkbox').attr('checked', true); 
 
      $(".switch").removeClass('on').addClass('off'); 
 
     } 
 
    }); 
 

 
    $(".switch").each(function() { 
 
     if ($(this).parent().find('input:checkbox').length) { 
 
      if (!$(this).parent().find('input:checkbox').hasClass("show")) { 
 
       $(this).parent().find('input:checkbox').hide(); 
 
      } 
 
      if ($(this).parent().find('input:checkbox').is(':checked')) { 
 
       $(this).removeClass('on').addClass('off'); 
 
      } else { 
 
       $(this).removeClass('off').addClass('on'); 
 
      } 
 
     } 
 
    }); 
 

 
    $(".switch").click(function() { 
 
     if ($(this).hasClass('on')) { 
 
      $(this).parent().find('input:checkbox').attr('checked', true); 
 
      $(this).removeClass('on').addClass('off'); 
 
     } else { 
 
      $(this).parent().find('input:checkbox').attr('checked', false); 
 
      $(this).removeClass('off').addClass('on'); 
 
     } 
 
    }); 
 

 
});

th { 
 
    text-align: left; 
 
} 
 

 
.switch-container { 
 
    padding: 5px; 
 
} 
 
.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    color: #ccc; 
 
    height: 18px; 
 
    padding: 6px 6px 5px 6px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    background: #ececec; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
} 
 
body.IE7 .switch { 
 
    width: 78px; 
 
} 
 
.switch span { 
 
    display: inline-block; 
 
    width: 35px; 
 
} 
 
.switch span.on { 
 
    color: #5cbacc; 
 
    margin-left: 5px; 
 
} 
 
.switch span.off { 
 
    margin-left: 10px; 
 
} 
 
.switch .toggle { 
 
    position: absolute; 
 
    top: 1px; 
 
    width: 40px; 
 
    height: 25px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    background: #fff; 
 
    z-index: 999; 
 
    -webkit-transition: all 0.15s ease-in-out; 
 
    -moz-transition: all 0.15s ease-in-out; 
 
    -o-transition: all 0.15s ease-in-out; 
 
    -ms-transition: all 0.15s ease-in-out; 
 
} 
 
.switch.on .toggle { 
 
    left: 1%; 
 
} 
 
.switch.off .toggle { 
 
    left: 56%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<table style="width:100%"> 
 
    <tr> 
 
    <th>Yes/No</th> 
 
    <th>Toggle</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="yn">Yes</td> 
 
    <td class="switch-container"> 
 
     <input type="checkbox" checked> 
 
     <div class="switch"><div class="toggle"></div> 
 
     <span class="on">YES</span><span class="off">NO</span></div></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="yn">No</td> 
 
    <td class="switch-container"> 
 
     <input type="checkbox" checked> 
 
     <div class="switch"><div class="toggle"></div> 
 
     <span class="on">YES</span><span class="off">NO</span></div></td> 
 
    </tr> 
 
</table> 
 
    <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
</body> 
 
</html>

Toutes les suggestions sur la façon d'améliorer mon script et obtenir ce travail sont les bienvenus.

Voici un JS Bin: https://jsbin.com/derevarixo/edit?html,css,js,output

Source

2017-04-25 Liz

votre code postal ici, pas seulement sur un site distant. Vous pouvez utiliser [Stack Snippets] (https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) pour le rendre exécutable. – Barmar

@Barmar Bonne idée. Mise à jour OP! – Liz

Dans la boucle .each() vous devez utiliser this pour accéder à l'élément de boucle de courant, non $(ynCell), qui contient toutes les cellules oui/non. Et pour trouver l'élément .switch associé, vous devez utiliser .find() à partir de la ligne en cours.

// TRIM FUNCTION 
 
if (typeof String.prototype.trim !== 'function') { 
 
    String.prototype.trim = function() { 
 
     return this.replace(/^\s+|\s+$/g, ''); 
 
    } 
 
} 
 

 
// TOGGLE FUNCTIONALITY 
 
$(document).ready(function() { 
 

 
    // FIND DEV YES/NO INPUT & CHECK VALUE 
 
    var ynCell = $("td.yn"); 
 
    $(ynCell).each(function() { 
 
     var ynValue = $(this).text().toLowerCase().trim(); 
 
     var row = $(this).closest("tr"); 
 
     // IF VALUE = NO, DISPLAY TOGGLE CLASS 'ON' 
 
     // IF VALUE = YES, DISPLAY TOGGLE CLASS 'OFF' 
 
     if (ynValue.indexOf('no') != -1) { 
 
      row.find('input:checkbox').attr('checked', false); 
 
      row.find(".switch").removeClass('off').addClass('on'); 
 
     } else if (ynValue.indexOf('yes') != -1) { 
 
      row.find('input:checkbox').attr('checked', true); 
 
      row.find(".switch").removeClass('on').addClass('off'); 
 
     } 
 
    }); 
 

 
    $(".switch").each(function() { 
 
     if ($(this).parent().find('input:checkbox').length) { 
 
      if (!$(this).parent().find('input:checkbox').hasClass("show")) { 
 
       $(this).parent().find('input:checkbox').hide(); 
 
      } 
 
      if ($(this).parent().find('input:checkbox').is(':checked')) { 
 
       $(this).removeClass('on').addClass('off'); 
 
      } else { 
 
       $(this).removeClass('off').addClass('on'); 
 
      } 
 
     } 
 
    }); 
 

 
    $(".switch").click(function() { 
 
     if ($(this).hasClass('on')) { 
 
      $(this).parent().find('input:checkbox').attr('checked', true); 
 
      $(this).removeClass('on').addClass('off'); 
 
     } else { 
 
      $(this).parent().find('input:checkbox').attr('checked', false); 
 
      $(this).removeClass('off').addClass('on'); 
 
     } 
 
    }); 
 

 
});

th { 
 
    text-align: left; 
 
} 
 

 
.switch-container { 
 
    padding: 5px; 
 
} 
 
.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    color: #ccc; 
 
    height: 18px; 
 
    padding: 6px 6px 5px 6px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    background: #ececec; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
} 
 
body.IE7 .switch { 
 
    width: 78px; 
 
} 
 
.switch span { 
 
    display: inline-block; 
 
    width: 35px; 
 
} 
 
.switch span.on { 
 
    color: #5cbacc; 
 
    margin-left: 5px; 
 
} 
 
.switch span.off { 
 
    margin-left: 10px; 
 
} 
 
.switch .toggle { 
 
    position: absolute; 
 
    top: 1px; 
 
    width: 40px; 
 
    height: 25px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    background: #fff; 
 
    z-index: 999; 
 
    -webkit-transition: all 0.15s ease-in-out; 
 
    -moz-transition: all 0.15s ease-in-out; 
 
    -o-transition: all 0.15s ease-in-out; 
 
    -ms-transition: all 0.15s ease-in-out; 
 
} 
 
.switch.on .toggle { 
 
    left: 1%; 
 
} 
 
.switch.off .toggle { 
 
    left: 56%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<table style="width:100%"> 
 
    <tr> 
 
    <th>Yes/No</th> 
 
    <th>Toggle</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="yn">Yes</td> 
 
    <td class="switch-container"> 
 
     <input type="checkbox" checked> 
 
     <div class="switch"><div class="toggle"></div> 
 
     <span class="on">YES</span><span class="off">NO</span></div></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="yn">No</td> 
 
    <td class="switch-container"> 
 
     <input type="checkbox" checked> 
 
     <div class="switch"><div class="toggle"></div> 
 
     <span class="on">YES</span><span class="off">NO</span></div></td> 
 
    </tr> 
 
</table> 
 
    <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
</body> 
 
</html>

Source

2017-04-25 00:25:52 Barmar

Définir l'élément de bascule sur 'on' ou 'off' valeur donnée dans le tableau HTML avec jQuery

Répondre

Questions connexes