Question

我试图通过点击链接在div中加载html。我设法做到了。但我有另外一个要求，我需要最少的jquery代码，当我点击div中的每个链接相应的html。

我的代码的HTML：

<div class="tac templateIcons">
                    <a href="#" data-id="1" id="template1">
                        <img src="assets/img/template1-01.png" alt="template 1" />
                    </a>
                    <a href="#" data-id="2"  id="template2">
                        <img src="assets/img/template1-02.png" alt="template 2" />
                    </a>
                    <a href="#" data-id="3"  id="template3">
                        <img src="assets/img/template1-03.png" alt="template 3" />
                    </a>
                </div>
                <div class="contentParent">
                    <div id="contentDiv">

                    </div>
                </div>

Javascript代码

    $(function(){
     $("#template1").click(function(){
        $("#contentDiv").load("template2.html");
      }); 
      $("#template2").click(function(){
        $("#contentDiv").load("template2.html");
      }); 
      $("#template3").click(function(){
        $("#contentDiv").load("template3.html");
      }); 
    });

以上代码对我有用，但问题是如果我有20个href或页面我必须编写20个js函数。

我需要通过智能动态js解决方案来避免它。

我根据数据属性编写了js代码，如下所示：

HTML代码：

<div class="tac templateIcons">
                    <a href="#" data-id="1" data-name="1" id="hidediv">
                        <img src="assets/img/template1-01.png" alt="template 1" />
                    </a>
                    <a href="#" data-id="2" data-name="1" id="hidediv">
                        <img src="assets/img/template1-02.png" alt="template 2" />
                    </a>
                    <a href="#" data-id="3" data-name="1" id="hidediv">
                        <img src="assets/img/template1-03.png" alt="template 3" />
                    </a>
                </div>
                <div class="contentParent">
                    <div id="contentDiv" class="contentDivStyle">

                    </div>
                </div>

JS代码：

$(function(){
    $("#hidediv").click(function(){

      $(this).attr("data-id");
      $page = "template" + $(this).attr("data-id") + ".html";
      console.log("log message:" + $page);
      $("#contentDiv").load($page);
    }); 

    });

但问题是我对所有href使用相同的id，它只需要第一个。即使我添加30个href并使用单个js代码，我怎样才能使它动态化？

你能帮我吗？

Answer 1

您不能在页面上多次使用相同的ID。把它改成上课。

Answer 2

使用类而不是ID（唯一标识符）

<强> HTML：

<div class="tac templateIcons">
    <a href="#" data-id="1" class="template" data-load="template1.html">
        <img src="assets/img/template1-01.png" alt="template 1" />
    </a>
    <a href="#" data-id="2"  class="template" data-load="template2.html">
        <img src="assets/img/template1-02.png" alt="template 2" />
    </a>
    <a href="#" data-id="3"  class="template" data-load="template3.html">
        <img src="assets/img/template1-03.png" alt="template 3" />
    </a>
</div>
<div class="contentParent">
    <div id="contentDiv">

    </div>
</div>

<强> jQuery的：

$(".template").click(function(){
    var template = $(this).data("load");
    $("#contentDiv").load(template);
});

Answer 3

您需要使用类来标记锚点。

<a href="#" data-id="1" data-name="1" class="hidediv">
    <img src="assets/img/template1-01.png" alt="template 1" />
</a>
<a href="#" data-id="2" data-name="1" class="hidediv">
    <img src="assets/img/template1-02.png" alt="template 2" />
</a>

等。那么jquery也很简单：

$(function(){
  $(".hidediv").click(function(){

    var currentId = $(this).data("id");
    $page = "template" + currentId  + ".html";
    console.log("log message:" + $page);
    $("#contentDiv").load($page);
  }); 

});

注意类选择器$('.class')和jquery函数data()以获取数据属性。

Answer 4

如果你想编写一个从多个标签调用的函数，你必须为所有这些标签提供相同的类。

<div class= "tac templateIcons">
                        <a href="#" data-id="1" class"loadHTML" box="1"  id="template1">
                            <img src="assets/img/template1-01.png" alt="template 1" />
                        </a>
                        <a href="#" data-id="2"  class"loadHTML" box="2"   id="template2">
                            <img src="assets/img/template1-02.png" alt="template 2" />
                        </a>
                        <a href="#" data-id="3"  class"loadHTML" box="3"   id="template3">
                            <img src="assets/img/template1-03.png" alt="template 3" />
                        </a>
                    </div>
                    <div class="contentParent">
                        <div id="contentDiv">

                        </div>
                    </div>

而且你只需要一个功能：

 $(".loadHTML").click(function(){
            var box = $(this).attr("box"); 
            $("#template" + box).load("template"+box+".html");
          });

Answer 5

获取与其父级使用data = c(1,4,2) # "white" / rgb(1,1,1) / rgb(255,255,255, maxColorValue=255) all identical barplot(data, col=rgb(255, 255, 255, maxColorValue=255), border="white") abline(h=seq(0,5,1), col="red") barplot(data, add=T, xaxt="n", yaxt="n") axis(2, at=c(0:4), label=c(0:4)) axis(1)无关的元素的索引。也可以使用click事件而不是ID。

<强>样本：

＆＃13;

.index()

＆＃13;

$(function() {
  $(".templater").click(function() {
    $page = "template" + ($(this).index() + 1) + ".html";
    console.log("log message:" + $page);
    $("#contentDiv").load($page);
  });

});

＆＃13;

<强>参考文献：

Determining child's index in its parent

如何使用jquery单击href或按钮时加载div中的html？

5 个答案: