Nie mogłem go znaleźć, ponieważ życie mnie jquery jest mniejszym sposobem na osiągnięcie wartości klikniętego elementu Li i wypełnienie pola Textlai ID = "wynik" za pomocą klikniętego wyniku.

Jak można to zrobić? To wydaje mi się, że naukę rakietową dla mnie.

<!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>
0
Jason Kelly 21 listopad 2013, 20:07

2 odpowiedzi

Najlepsza odpowiedź

To moja sugestia, choć nie jest testowana w programie 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.

Nawiasem mówiąc, w jQuery powyżej można skrócić do:

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

JS Fiddle Demo.

Nie zawsze jest to najlepsze rozwiązanie, ale oszczędza dużo czasu i obsługuje problemy z przeglądarką bardzo dobrze (oszczędzając nas od normalizacji dla obiektu event); A podczas gdy ty nie (i nie powinny uzasadniać nie-przy użyciu jQuery, czasami warto pamiętać, że są inne, bardziej przydatne, rzeczy, które możemy wszyscy robić zamiast uniknąć go na dowolne (iw tym przypadku nieokreślone) powody.

3
David says reinstate Monica 21 listopad 2013, 16:20

Demo jsfiddle.

Opis

Jest to czysta odpowiedź JavaScript, używa tego na każdym przedmiocie Li. To wiązanie zdarzeń można wykonać w zdarzeniu window.onload za pomocą pętli, jeśli wolisz. Działa na wszystkich przeglądarkach, układ wygląda mi źle, ale tak jak to nie to nie obchodziło.

Daj mi znać, jeśli potrzebujesz więcej pomocy.


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;
}
0
abc123 21 listopad 2013, 16:26