Question

在我的HTML页面中，我有9个段落项目和3个跨度。如果我点击前三段，我将在第一个跨页中加载一些网页内容。如果我点击后三段，我将在第二段中加载一些网页内容。等等最后三段。我在jQuery中开发了这段代码：

<script type="text/javascript">

        $(document).ready(function() {
            $("p").click(function() {
                var myID = $(this)[0].id, where;

                if (myID == "p1" || myID == "p2" || myID == "p3") {
                    where = "span1";
                } else if (myID == "p4" || myID == "p5" || myID == "p6") {
                    where = "span2";
                } else {
                    where = "span3";
                }

                $("#"+where).load("GET", "hello.html",
                    function(responseText, statusText, xhr) {
                        if (statusText == "error") alert("Errore "+xhr.status+": "+xhr.statusText)
                    });

            });
        });

    </script>

    <p id="p1">Prova 1</p>
    <p id="p2">Prova 2</p>
    <p id="p3">Prova 3</p>

    <p id="p4">Prova 4</p>
    <p id="p5">Prova 5</p>
    <p id="p6">Prova 6</p>

    <p id="p7">Prova 7</p>
    <p id="p8">Prova 8</p>
    <p id="p9">Prova 9</p>

    <span id="span1">1</span>
    <span id="span2">2</span>
    <span id="span3">3</span>

它工作正常，但我会改进我设置 where var的部分。我怎么能这样做？更小，更灵活的解决方案将是最好的。

Answer 1

您可以使用p前缀自定义属性data-*存储目标元素信息，这些属性可以使用.data()或Element.dataset属性进行检索。

HTML 的

<p id="p1" data-target="#span1">Prova 1</p>
<p id="p4" data-target="#span2">Prova 4</p>
<p id="p7" data-target="#span3">Prova 7</p>

脚本

$(document).ready(function() {
    $("p").click(function() {
        var target = this.dataset.target;// $(this).data('target');
        $(target).load("GET", "hello.html",
            function(responseText, statusText, xhr) {
                if (statusText == "error") alert("Errore "+xhr.status+": "+xhr.statusText)
            });

    });
});

$(document).ready(function() {
  $("p").click(function() {
    $('.s').hide();
    var target = this.dataset.target; // $(this).data('target');
    $(target).show().text('Dummy Text ' + this.textContent)
  });
});

.s {
  display: none;
  color:green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1" data-target="#span1">Prova 1</p>
<p id="p2" data-target="#span1">Prova 2</p>
<p id="p3" data-target="#span1">Prova 3</p>

<p id="p4" data-target="#span2">Prova 4</p>
<p id="p5" data-target="#span2">Prova 5</p>
<p id="p6" data-target="#span2">Prova 6</p>

<p id="p7" data-target="#span3">Prova 7</p>
<p id="p8" data-target="#span3">Prova 8</p>
<p id="p9" data-target="#span3">Prova 9</p>

<span class='s' id="span1">1</span>
<span class='s' id="span2">2</span>
<span class='s' id="span3">3</span>

Answer 2

我建议使用数据属性和不引人注意的方式来做到这一点。添加常见的css-class并使用它来附加单个事件并使用data-attribute来告知要填充的范围：

＆＃13;

 $(document).ready(function() {
   $(".clickMe").on("click", "p", function() {
     var $div = $(this).closest(".clickMe");
     $($div.data("target")).load("GET", "hello.html",
       function(responseText, statusText, xhr) {
         if (statusText == "error") alert("Errore " + xhr.status + ": " + xhr.statusText)
       });
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clickMe" data-target="#span1">
  <p>Prova 1</p>
  <p>Prova 2</p>
  <p>Prova 3</p>
</div>

<div class="clickMe" data-target="#span2">
  <p>Prova 4</p>
  <p>Prova 5</p>
  <p>Prova 6</p>
</div>

<div class="clickMe" data-target="#span3">
  <p>Prova 7</p>
  <p>Prova 8</p>
  <p>Prova 9</p>
</div>

<span id="span1">1</span>
<span id="span2">2</span>
<span id="span3">3</span>

＆＃13;

注意：请记住span can only have phrasing content。

Answer 3

您可以在html中添加数据目标属性，然后点击只需使用在正确的部分加载

＆＃13;

loadContent = function( targetId ) {
  $("#" + targetId).text('fake load: ' + targetId);
}

$("p").on('click', function() {
  loadContent($(this).attr('data-target'));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1" data-target="span1">Prova 1</p>
    <p id="p2" data-target="span1">Prova 2</p>
    <p id="p3" data-target="span1">Prova 3</p>

    <p id="p4" data-target="span2">Prova 4</p>
    <p id="p5" data-target="span2">Prova 5</p>
    <p id="p6" data-target="span2">Prova 6</p>

    <p id="p7" data-target="span3">Prova 7</p>
    <p id="p8" data-target="span3">Prova 8</p>
    <p id="p9" data-target="span3">Prova 9</p>

    <span id="span1">1</span>
    <span id="span2">2</span>
    <span id="span3">3</span>

＆＃13;

你可能会争辩说你在html中添加了无用的东西，但我认为通过查看html知道哪些元素与哪些元素相关是很好的

改进脚本

3 个答案: