我如何在 form_input() codeigniter 中放置 javascript 数据属性答案

【问题标题】：how can i place javascript data attribute in form_input() codeigniter我如何在 form_input() codeigniter 中放置 javascript 数据属性
【发布时间】：2015-05-22 09:36:19
【问题描述】：

这是我的代码，如何在 form_input() codeigniter 中放置 javascript 数据属性？

$experience=array(
    'name'=>'experience',
    'class'=>'slider tags',
    'id'=>'experience',
    'data-slider-min'=>1,
    'data-slider-max'=>15,
    'data-slider-step'=>1,
    'data-slider-value'=>[5,10]
);
echo form_input($experience); ?>

【问题讨论】：

标签： javascript php codeigniter

【解决方案1】：

看看这段代码，它可能会帮助你克服这个问题

                        <?php
                        $experience=array(
                            'name'=>'experience',
                            'class'=>'slider tags',
                            'id'=>'experience',
                            'data-slider-min'=>0,
                            'data-slider-max'=>15,
                            'data-slider-step'=>1,
                            'data-slider-value'=>['5','10'],
                            'value'=>3,4

                        );
                      echo form_input($experience); 
                    ?>

【讨论】：

【解决方案2】：

您是否尝试过将 JS 属性简单地移动到用于创建输入的 $experience 变量中？

$experience=array(
    'name'=>'experience',
    'class'=>'slider tags',
    'id'=>'experience',
    'data-slider-min' => 1,
    'data-slider-max' => 15,
);

等等……

【讨论】：

@M.Athishkrishna 您能否在原始帖子中显示您新编辑的代码？
你看到了吗？@Leprichaun
在最后一个属性两边加上单引号，就像你对 name、id 和 class 所做的那样。数字不需要引号，但最后一个会被视为字符串。
别担心，我的朋友。不要忘记选择这个作为答案，以帮助将来遇到它的任何人:)

【解决方案3】：

// HTML 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <li class="item" data-done-state="true">Erster Eintrag</li>
    <li class="item" data-done-state="false">Zweiter Eintrag</li>
    <li class="item" data-done-state="true">Dritter Eintrag</li>
  </body>
</html>

//CSS 代码

li {
  background-color: khaki;
  margin: 2px;
  padding: 2px;
}

[data-done-state="true"] {
  text-decoration: line-through;
}

//JS代码

window.onload = function() {
  const nodes = document.querySelectorAll(".item");
  for (const node of nodes) {
    node.addEventListener("click", function(elem) {
      switchDoneState(elem);
    });
  }
};

function switchDoneState(elem) {
  const isDone = JSON.parse(elem.target.getAttribute("data-done-state"));
  elem.target.setAttribute("data-done-state", !isDone);
}

【讨论】：