Question

我找不到，因为我的生活中jQuery更少的方法来获得点击的li项的价值并用点击的结果填充textarea框id =“result”。

如何做到这一点？这对我来说似乎是火箭科学。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#container {
    width: 200px;
    float: left;
    font-family: Arial;
    font-size: 10pt;
    position:relative;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none;
    position:absolute;
    background: #C0C0C0;
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
    float: left;
    position:absolute;
}

#menu, ul {
    list-style: none;
    margin: 0;
    cursor: default;
    width:194px;
    padding:6px;
}
#menu, ul, li {
    padding: 2px;
}
#menu li:hover{
    background: blue;
    color: #fff;
}
#result {
    border: 1px solid #000;
    width: 206px;
}
</style>

<script type="text/javascript">
 function showMenu(){
   document.getElementById("one").style.display="block";
 }
 function hideMenu(){
   document.getElementById("one").style.display="none";
 }
</script>

</head>

<body>

<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </div>
</div>

<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>

</html>

Answer 1

这是我的建议，虽然它没有在Internet Explorer中测试过：

// pick a name that's useful to you:
function textToTextArea (e) {
    /* most browsers pass the event object to the function,
       IE does, or did, not; here we use the passed-event if it's
       available, or the window.event if it's not there (implying IE):
    */
    e = e || window.event;
    // finding out the text property we can access to retrieve an element's text:
    var text = 'textContent' in document ? 'textContent' : 'innerText';
    /* getting the textarea by its 'id',
       and setting its innerHTML to be equal to the text of the clicked 'li':
    */
    document.getElementById('result').innerHTML = e.target[text];
}

var list = document.getElementById('menu');

list.onclick = textToTextArea;

JS Fiddle demo

顺便说一下，在jQuery中，上面可以缩写为：

$('li').click(function(){
    $('#result').val($(this).text());
});

JS Fiddle demo

它并不总是最好的解决方案，但它可以节省大量时间并很好地处理跨浏览器问题（使我们免于对event对象进行规范化）;虽然不（并且不应该）必须证明不使用jQuery，但有时值得记住，还有其他更有用的东西我们都可以做而不是简单地避免任意（在这种情况下是未指明的）原因。

Answer 2

DEMO jsFiddle

<强>描述

这是一个纯JavaScript的答案，它在每个li项目上使用它。如果您愿意，可以使用for循环在window.onload事件中完成此事件绑定。它适用于所有浏览器，布局看起来不对我，但因为这不是我不关心的问题。

如果您需要更多帮助，请与我们联系。

<强> HTML

<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
            <li onclick="itemPicked(this)">Item 1</li>
            <li onclick="itemPicked(this)">Item 2</li>
        </ul>
    </div>
</div>
<div id="two">
    <img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>

<强> JS

function showMenu() {
    document.getElementById("one").style.display = "block";
}

function hideMenu() {
    document.getElementById("one").style.display = "none";
}

function itemPicked(el) {
    document.getElementById("result").value = el.textContent;
}

<强> CSS

#container {
    width: 200px;
    float: left;
    font-family: Arial;
    font-size: 10pt;
    position:relative;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none;
    position:absolute;
    background: #C0C0C0;
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
    float: left;
    position:absolute;
}
#menu, ul {
    list-style: none;
    margin: 0;
    cursor: default;
    width:194px;
    padding:6px;
}
#menu, ul, li {
    padding: 2px;
}
#menu li:hover {
    background: blue;
    color: #fff;
}
#result {
    border: 1px solid #000;
    width: 206px;
}

使用JavaScript返回click li项的值并使用结果填充textarea

2 个答案:

DEMO jsFiddle