Kinglish的回复列表

4 年前

回复了 Kinglish 创建的主题 » 表单ID中带有jQuery的通配符数字

您只需在页面上的表单中循环,检查前面元素的id和类是否匹配,然后再进行预结束。。。

$('form').each(function(i, o) {
  let before = $(o).prev();
  if (o.id.includes('gform_') && before.hasClass('gform_heading')) {
    before.prependTo($(o)).append(` - and my id if you need it is ${o.id.split('gform_')[1]}`) 
  }
})

form {
  border: 1px solid #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gform_heading">gform_heading</div>
<form id="gform_8" action="/volunteer/">
  <div class="gform_body gform-body">...</div>
  <div class="gform_footer top_label">...</div>
</form>


<div class="gform_heading">gform_heading</div>
<form id="other_8" action="/volunteer/">
  <div class="gform_body gform-body">...</div>
  <div class="gform_footer top_label">...</div>
</form>

4 年前

回复了 Kinglish 创建的主题 » 如何在不删除其他行的情况下向jquery中的表中添加新的“top”行

下面是一些关于如何使用JQ添加到顶部、添加到底部、从顶部移除和从底部移除的示例

let n = 0
$('button').click(function() {
  n++
  let fakerow = `<tr><td>${n}</td><td>12:34</td><td>123123123</td><td>10</td><td>??</td><td>Fred</td><td>Solo</td><td>available</td></tr>`;

  let action = $(this).data('action');
  if (action == 'add-top') {
    $('#blockList').prepend($(fakerow))
  } else if (action == 'add-bottom') {
    $('#blockList').append($(fakerow))
  } else if (action == 'remove-top') {
    $('#blockList tr').first().remove()
  } else if (action == 'remove-bottom') {
    $('#blockList tr').last().remove()

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
  <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>Time (Local)</th>
      <th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
      <th>Height</th>
      <th>Effort</th>
      <th>Found By</th>
      <th>Pool/Solo</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="blockList"></tbody>
</table>
<hr>

<button data-action='add-top'>Add row to top</button>
<button data-action='add-bottom'>Add row to end</button>
<hr>
<button data-action='remove-top'>Remove row from top</button>
<button data-action='remove-bottom'>Remove row from end</button>

4 年前

回复了 Kinglish 创建的主题 » 如何使用jquery选择已经处于悬停状态的元素?

你没有正确瞄准h3。因为H3和img都有一个共同的父项,所以你可以通过 closest() 和 find() ,像这样。我加入了fadeIn和fadeOut,而不是show/hide。

$(".et_pb_gallery_image img").hover(imgHover, imgHover)

function imgHover(e) {
  let o = $(this).closest('.et_pb_gallery_item').find("h3");
  if (e.type == 'mouseenter') o.fadeIn();
  else o.fadeOut()
}

h3 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='et_pb_gallery_item'>
  <div class='et_pb_gallery_image'>
    <img src='https://picsum.photos/200/300' />
  </div>
  <h3>Title</h3>
</div>

4 年前

回复了 Kinglish 创建的主题 » 在jQuery中,如何在每次之后执行代码

你正在使用 .success 和 done ,所以我删除了一个。两者都不需要。此外,为了让阅读/故障排除更容易,我将post ajax代码移到了它自己的函数中。我不知道你为什么给一个部门写信,然后又把它读回来,所以我留下了,但把它注释掉了。最后,我添加了一个简单的计数器来迭代后续的ajax调用,这样它就可以检测到什么时候一切都完成了。我偷的 idea from this post .

$("#loader").show();
var url = $(this).attr("action");
var formData = new FormData($(this)[0]);
$(this).hide();
$.ajax({
    url: "generateJson.php",
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    error: function(xhr, desc, err) {
      console.log("error");
    }
  }).done(function(data) {
    $('#json').append(data); //content loads here
    runPostAjax(data)
  }),
  error: function(xhr, desc, err) {
    console.log("error: " + desc + " " + err);
  }
});



function runPostAjax(data) {
  //data = JSON.parse($("#json").val());
  let done = data.length; // number of total requests
  $.each(data, function(key, val) {
        $.ajax({
            type: "POST",
            url: "/generateInvoice.php",
            dataType: "html",
            data: val,
            success: function(data, status) {
              if (data) {
                $("#result").append(data)
                done -= 1;
                if (done == 0) {
                  $("#loader").hide();
                  $("#done").show();
                }
              } else {
                console.log("Error");
              }
            })


        }

4 年前

回复了 Kinglish 创建的主题 » 使用jQuery应用用户输入更改

你让听众听错了。它需要在按钮上

$('.form-container button').on('click', function() {
  $('.box').css("background-color", $('.form-container input').val());
});

$('.form-container button').on('click', function() {
  $('.box').css("background-color", $('.form-container input').val());
});

.form-container {
  margin: 0 auto;
  width: 235px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.box {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DO NOT MODIFY --->
<div class="form-container">
  <input type="text" class="colourInput" placeholder="Type colour here">
  <button>Apply</button>
</div>
<div class="box">
</div>