将切换元素设置为 'on' 或 'off' 给定值 HTML table 和 jQuery

Question

我需要更改 HTML/CSS/jQuery 切换元素的显示方式 - 在 "YES" 或 "NO" - 取决于 table 中单元格的值。

所需的功能是：

如果 table 单元格的文本显示 "yes" 切换元素需要具有 .off 的 class 并设置选中属性true 处的复选框或已选中。
如果单元格的文本显示 "no"，则切换元素需要具有 .on 的 class 并将复选框的选中属性设置为 false 或未选中。

到目前为止，这是我的代码：

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

欢迎就如何改进我的脚本并使其正常工作提出任何建议。

这是一个 JS Bin：https://jsbin.com/derevarixo/edit?html,css,js,output

Answer 1

在 .each() 循环中，您需要使用 this 访问当前循环元素，而不是 $(ynCell)，它包含所有 yes/no 单元格。要找到相关的 .switch 元素，您需要使用当前行中的 .find()。

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

将切换元素设置为 'on' 或 'off' 给定值 HTML table 和 jQuery

Set toggle element to 'on' or 'off' given value in HTML table with jQuery

html

javascript

css

jquery

toggle