Question

我有一个应该与每个String loop = "a b c d e f g h i j k l"; Matcher loopMatcher = Pattern.compile("\\S+").matcher(loop); boolean loopEnded = false; while (!loopEnded) { use(loopMatcher); if (loopMatcher.hitEnd()) { loopEnded = true; } } public static void use(Matcher matcher) { if (!matcher.find()) { System.out.println("loop not ended but matcher hit end"); } }对应的函数。使用纯JavaScript，我想知道如何将li上的HTML替换为用户输入的内容。

我只希望单击要运行的函数，并且仅适用于相应的行（在本例中为li）。

listitem

function day(el){
var listitem = document.getElementsByClassName('listitem');
var changebox = document.getElementsByClassName('changebox');

listitem[el].innerHTML = changebox[el].value;
}

ul li {list-style-type: none;}
.changebox {width: 40px;}

Answer 1

这是我决定实施你的日期功能的方式。 el不是索引，而是它自己的元素。所以我用它来查找包含它的parentNode标签li。然后从那里搜索您为值指定的类的第一次出现。

function day(el){

   var parent = el.parentNode;
   var listitem = parent.getElementsByClassName('listitem')[0];
   var changebox = parent.getElementsByClassName('changebox')[0];

   listitem.innerHTML = changebox.value;
}

ul li {list-style-type: none;}
.changebox {width: 40px;}

<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

Answer 2

这取代了整个订单项，我不知道您是否希望保留更改框并使用略微更简洁的查询选择器而不是getElementByClassName。

＆＃13;

function day(el){
var parent = el.parentNode;
var changebox = parent.querySelector('.changebox')
var listitem = parent.querySelector('.listitem')

listitem.innerHTML = "Item " + changebox.value;
}

＆＃13;

ul li {list-style-type: none;}
.changebox {width: 40px;}

＆＃13;

<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

＆＃13;

Answer 3

将javascript和标记混合起来并不是一个好习惯。你可以考虑将它们分开。以下是您的示例的工作代码

$(document).ready(function() {

  $(".listcontainer button").bind('click', day);
});

function day(event) {
  var targetElement = event.target;
  var $targetObject = $(targetElement);
  var siblings = $targetObject.siblings();
  var listitem = siblings.filter('.listitem');
  var changebox = siblings.filter('.changebox');
  $(listitem).html($(changebox).val())
}

ul li {
  list-style-type: none;
}
.changebox {
  width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listcontainer">
  <li>
    <span class="listitem">Item 1</span>
    <input type="text" class="changebox" />
    <button class="button">Edit</button>
  </li>

  <li>
    <span class="listitem">Item 1</span>
    <input type="text" class="changebox" />
    <button class="button">Edit</button>
  </li>
</ul>

单击每个指定类项的函数

3 个答案: