Question

点击div中的内容在其他div中显示，用HTML，CSS，Jquery，js都行…

我想点击上面的咖啡名称以及右面的加减号，能在下面绿色框内显示该咖啡的名称以及数量，这个怎么实现，求助大神

Answer 1

jquery
<script type="text/javascript">
    //如果下面绿色框每次只显示一种咖啡的信息的话
    //1：给每个咖啡名字的div都写上class="coffeeName"，为了绑定click事件
    //2：+号给个class="plus";
    //3：绿色框框里给个class="show";

    var coffee = {name:"",number:0};//一个对象；多个对象的话再加一个数组（会复杂一些）
    var cname = "";//咖啡名字
    var cnumber = 0;//咖啡数量
    
    $(".coffeeName").click(function(){
        cname = $(this).text();
        if(coffee.name=="" || coffee.name!=cname ){
            coffee.name = cname;
            cnumber =0;//数量清零
            show();
        }
    }
    //加号
    $(".plus").click(function(){
        cnumber +=1;
        coffee.cnumber = cnumber ;
        show();
    }
    
    function show(){
        $(".show"). empty();//先清空里面的内容，再写进去
        //if(coffee.cnumber!=0){
            $(".show").text(coffee.name +" : "+coffee.cnumber+"杯");
        //}
    }
</script>

Answer 2

写一个JQ的方法给你。记得自己去引用JQ文件
<script>
var clickDiv = $(' . + 需要点击的类名'); //获取点击对象
var showDiv = $('. + 需要显示的类名'); //获取显示的div对象；
clickDiv.onclick = funciton(){
$showDiv.html($(this).html());
}

</script>
有问题继续追问。望采纳

追问

追答

。。。你都不要改的。
var clickDiv = $(' . + 需要点击的类名'); //获取点击对象
var showDiv = $('. + 需要显示的类名'); //获取显示的div对象
比如你要点击的对象是
第一句就要 var clickDiv = $(' .a'); //获取点击对象
第二句一样。。。。。哪里能就这样直接复制啊

追问

嗯！代码感觉有点少，好了还是没法用，能多写点吗，我是新手，不太懂

追答

//这边改成你的jq

.dianji {
height: 20px;
background: #CFC;
}
.xianshi {
font-size: 20px;
background: #CCF;
}

1
2
3
4
5
6
7
8

这边是显示区域

var clickdiv = $('.dianji'),
showdiv = $('.xianshi');
clickdiv.on('click', function(){
console.log(this.innerHTML);
showdiv.html($(this).html());
});