Javascript 如何回显数据类型="；地址；？

我正在尝试使用javascript onclick。当用户使用class=“store box”单击一个div时，该计划将回显该div中的内容。参见示例：

<div 
onclick="javaclick()"
data-type="store" 
class="store box"
data-latitude="53.7658344" 
data-longitude="-2.6646485">
<p>
    <span class="title" data-type="title">Store38</span>,<br>
    <span data-type="address"><i class="fa fa-map-marker"></i> 123 Barrington Road, Barrington, BR1 2JH</span>,<br>
    <span data-type="phone"><i class="fa fa-phone"></i> 00000 000000</span><br>
    <span data-type="openingtimes"><i class="fa fa-clock-o"></i> Opening Times: <?php include('store-hours.php'); ?></span>
    <br>

    <span data-type="directions" class="directions">
        <label data-type="directions-label">Get directions</label> 
        <input data-type="directions-input" type="text" class="hidden" />
    </span>
</p>

Store38，

巴灵顿路123号，巴灵顿，BR1 2JH，

00000000000

开放时间：


问路

因此，在本例中，当用户单击div store38时，它会将数据类型address中的地址写入div footer_框

<div id="footer_box">
        <script type="text/javascript">
            function javaclick(){
                 document.write("data-type='address'");
            }
        </script>
    </div>

函数javaclick（）{
编写（“数据类型='address'”）；
}

---

我总共有50家商店，每一家都可以。有什么想法吗？

不要从HTML调用一些javascript，而是在JS中包含该逻辑。例如：

(function() {
    var footerBox = document.querySelector('footer_box');
    [].forEach.call(document.querySelectorAll('.store.box'), function(el){
        el.addEventListener('click', function(e) {
            footerBox.innerHTML = e.target.dataset.type;
        }, false);
    });
})();

---

从JS输出数据的最佳方法是将其写入某个div

<div id="Output"> </div>

还是纯JS解决方案

document.getElementById("output").innerHtml = "works";

要获取该数据，您需要jquerys

.data（）

或

.attr（）

函数：

var data = $(element).data("type");

或：

要在函数中处理它，必须传输

元素

变量

function javaclick(element) {

}

和绑定事件：

$(".store").bind("click", function(event){
    /* code */
});

现在只要把它组装起来，就有了解决方案

$('.store.box').click(function() {
  var data = $(this).data("type");
  $('#footer_box').text(data);
});

---

使用jquery，您可以执行以下操作：

$(".store").click(function(){
    address = $(this).find('[data-type=address]').text();
    $("#footer_box").html(address);
});

---

演示

标记了jQuery，因此类似于

$（'.store.box'）。单击（函数（）{$（'#footer_box'））.text（$（'[data type=address]'，$（this））.text（）；}）？接近足够yeh当用户单击50个div中的一个时，它将从他们单击的div中回显data type=“address”现在如果我有data type=image并有一个，我只需要将data type=address更改为image，然后它就会工作，还是需要更改其他内容？
$('.store.box').click(function() {
  var data = $(this).data("type");
  $('#footer_box').text(data);
});

$(".store").click(function(){
    address = $(this).find('[data-type=address]').text();
    $("#footer_box").html(address);
});