Question

如何从下面的一组div中选择1个innerHTML值并将值推送到对象中？

下面的每个div类（一，二）应该类似于表单上的HTML选择框，每个类只存储一个值。

我想将每个div类中的1个值推送到对象中。

<!DOCTYPE html>
<html>

<head>
<title>test</title>


<script src="jquery-1.11.1.min.js"></script>


<script>
obj = {};

$(document).ready(function() {

    $(".one").click(function(){
       var text = $( ".box" ).html();

       obj.var1 = text;
       alert(obj.var1);
    });

    $(".two").click(function(){
       var text = $( ".box" ).html();

       obj.var2 = text;
       alert(text);
    });
});
</script> 


<style type="text/css">
#menu div{
  text-align:center;
  display:inline-block;
}

div.box {
    position: relative;
    width: 30px;
    height: 30px;
    background: #fff;
    color: #000;
    padding: 20px;
    border: 1px solid;   
}



</style>
</head>



<body>



    <div id="content1">

        <div id="menu1">
            <a href="#1" class="one"><div class="box">A</div></a>
            <a href="#1" class="one"><div class="box">B</div></a>
            <a href="#1" class="one"><div class="box">C</div></a>
            <a href="#1" class="one"><div class="box">D</div></a>
        </div>
    </div>
    <p>&nbsp;</p>

    <div id="content2">

        <div id="menu2">
            <a href="#2" class="two"><div class="box">E</div></a>
            <a href="#2" class="two"><div class="box">F</div></a>
            <a href="#2" class="two"><div class="box">G</div></a>
            <a href="#2" class="two"><div class="box">H</div></a>
        </div>
    </div>
</body>
</html>

Answer 1

$(function(){
    $('.one.box').on('click', function() {
        obj.var1 = $(this).html();
    }    
    $('.two.box').on('click', function() {
        obj.var2 = $(this).html();
    }
})

此代码调整每个div onClick事件，当它触发时将其html（）值添加到obj.var1或obj.var2，我希望它可以帮助你，如果有任何进一步的问题，你可以问。

Answer 2

问题：

使用document代替"document"
您需要将.find()用于子框
您需要停止默认操作。所以在这里使用了return false;。您也可以使用event.preventDefault()

使用

var obj = {};
$(document).ready(function () {
    $(".one").click(function () {
        var text = $(this).find(".box").html(); //Find child box
        obj.var1 = text;
        alert(obj.var1);
        return false; //Stop default action
    });

    $(".two").click(function () {
        var text = $(this).find(".box").html();
        obj.var2 = text;
        alert(text);
        return false;
    });
});

DEMO

Answer 3

在点击功能中使用$(this)，这样就可以获得所选div中的文字。

$(".one").click(function(){
   var text = $(this).find("div").html();

   obj.var1 = text;
   alert(obj.var1);
});

$(".two").click(function(){
   var text = $(this).find("div").html();

   obj.var1 = text;
   alert(obj.var1);
});

注意：$("document")应为$(document) ..

将div innerHTML值添加到object

3 个答案: