Question

我创建了一个创建HTML代码块的函数。它的id是使用从表单收集的标记变量动态创建的。代码：

$(function() {
  $("#addTag").click(function() {
    var tag = $("#tag").val();
    $('section').append('<div id="galleryContainer' + tag + '"><div class=".gallery-header"><h1 >Tag:' + tag + '</h1><div class=".gallery-sort"><p>Sort by:</p><button onclick="sortImagesByPublishedDate()" >Data published</button><button onclick="sortImagesByTakenDate()">Data taken</button><div data-tag="' + tag + '" class="gallery component" id="' + tag + '"></div></div></div></div>');
    mainFunction(tag);
  });
});

然后我想通过点击按钮来使用sortImagesByPublishedDate()和sortImagesByTakenDate()，但我希望他们只在这个特定的图库中而不是在所有图库中对图像进行排序。如果我有一个画廊，它工作正常。当我添加更多画廊时，问题就开始了。我应该如何在以下函数中选择变量$gallery？

function sortImagesByPublishedDate() {
  var $gallery = $('div.gallery'),
    $galleryA = $gallery.children('a');

  $galleryA.sort(function(a, b) {
    var an = a.getAttribute('data-published'),
      bn = b.getAttribute('data-published');

    if (an > bn) {
      return 1;
    }
    if (an < bn) {
      return -1;
    }
    return 0;
  });

  $galleryA.detach().appendTo($gallery);
}

Answer 1

使用.siblings方法选择另一个元素的兄弟元素。所以在你的情况下你可以打电话

var $gallery = $(buttonElement).siblings(".gallery");

由于您使用内联JS来调用排序函数，您需要对其进行修改以将this传递给函数，这样您就可以获得对单击按钮的引用，即：

修改后的HTML

<button onclick="sortImagesByPublishedDate(this)">Date published</button>

JS

function sortImagesByPublishedDate(ele){
  var $gallery = $(ele).siblings(".gallery"),

演示

＆＃13;

$(function(){
  $("#addTag").click(function(){
    var tag=$("#tag").val();
    $('section').append('<div id="galleryContainer'+tag+'"><div class=".gallery-header"><h1 >Tag:'+tag+'</h1><div class=".gallery-sort"><p>Sort by:</p><button onclick="sortImagesByPublishedDate(this)" >Data published</button><button onclick="sortImagesByTakenDate(this)">Data taken</button><div data-tag="'+tag+'" class="gallery component" id="'+tag+'"></div></div></div></div>');
    //mainFunction(tag);
  });
});

function sortImagesByPublishedDate(ele){
  var $gallery = $(ele).siblings(".gallery"),
      $galleryA = $gallery.children('a');
  alert($gallery[0].id);

  $galleryA.sort(function(a,b){
    var an = a.getAttribute('data-published'),
        bn = b.getAttribute('data-published');

    if(an > bn) {
      return 1;
    }
    if(an < bn) {
      return -1;
    }
    return 0;
  });

  $galleryA.detach().appendTo($gallery);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="tag">
<button id="addTag">Add</button>
<section>
</section>

＆＃13;

您可以使用delegated event处理来为按钮设置侦听器，而不是内联js：

修改后的HTML

<button class="sortButton" data-sort="date">Data published</button>
<button class="sortButton" data-sort="taken">Data taken</button>

JS

$("section").on("click",".sortButton",function(){
   //'this' will be the button clicked
   var $gallery = $(this).siblings(".gallery");
   var sortBy = $(this).data("sort");
   if(sortBy == "date"){
        //do date sort
   } else if(sortBy == "taken"){
        //do taken sort
   }
   //... rest of code
});

Answer 2

没有经过测试，但我认为这将是一个问题：

HTML：

sortImagesByPublishedDate(this)//pass this

JS：

  function sortImagesByPublishedDate() {
  var $gallery = $(this).siblings('.gallery'),
  $galleryA = $gallery.children('a');
           .
           .

Answer 3

将this传递给sortImagesByPublishedDate(this) html

中的append

所以你的代码是

function sortImagesByPublishedDate(thisObj) {

然后再做

var $gallery = $(thisObj).siblings(".gallery");

Answer 4

$(function() {
    $("#addTag").click(function() {
        var tag = $("#tag").val();
        $('section').append('<div id="galleryContainer' + tag + '"><div class=".gallery-header"><h1 >Tag:' + tag + '</h1><div class=".gallery-sort"><p>Sort by:</p><button onclick="sortImagesByPublishedDate()" >Data published</button><button onclick="sortImagesByTakenDate()">Data taken</button><div data-tag="' + tag + '" class="gallery component" id="' + tag + '"></div></div></div></div>');
        sortImagesByPublishedDate(tag);  **// call the function and pass param tag**
        mainFunction(tag);
    });
});

function sortImagesByPublishedDate(tag) {
    **// instead of class select id**
    var $gallery = $('div#galleryContainer'+tag),
        $galleryA = $gallery.children('a');

    $galleryA.sort(function(a, b) {
        var an = a.getAttribute('data-published'),
            bn = b.getAttribute('data-published');

        if (an > bn) {
            return 1;
        }
        if (an < bn) {
            return -1;
        }
        return 0;
    });

    $galleryA.detach().appendTo($gallery);
}

//希望这有帮助

通过动态创建的id动态选择div

4 个答案: