Question

即时尝试获取javascript onclick工作计划是当用户点击带有class =“store box”的div时，它将回显该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>

所以当用户在这种情况下点击存储区38时，它会从div footer_box中的数据类型地址写入地址。

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

它会为我拥有50个商店的每个商店做到这一点。任何想法？

Answer 1

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

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

jQuery函数

$("#output").text("works");

或纯JS解决方案

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

要获取该数据，您需要jquerys .data()或.attr()函数：

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

或者：

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

要在功能中处理它，您必须传输element变量。

function javaclick(element) {

}

绑定事件：

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

现在只需组装，你就有了解决方案。

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

Answer 2

不是从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);
    });
})();

Answer 3

使用jquery，你可以这样做：

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

演示Fiddle here

如何回显data-type =“address”？

3 个答案: