注册    登录
私信  •  关注

mplungjan
mplungjan 最近创建的主题
» mplungjan 创建的更多主题
mplungjan 最近回复了
3 年前
回复了 mplungjan 创建的主题 » 如何将经典JavaScript中的“for of”转换为jQuery?

如果你有多个幻灯片放映

  • 对于与简单for循环的比较 

    const sliders = document.querySelectorAll('.slider');
for (let i=0;i<sliders.length;i++) {
  new Siema({
    selector: sliders[i]
  });
}

  • 对于对forEach

对于IE不支持of,但可以使用forEach。forEach需要使用spread进行包装,因为IE也不支持HTML集合上的forEach 

  [...document.querySelectorAll('.slider')].forEach(function() {
    new Siema({
      selector: this
    });
  })

  • 对于vs jQuery各自的 

    $('.slider').each(function() {
  new Siema({
   selector: this
  })
})

  • 也许(取决于你的html)你可以这样做 

    const slideShow = new Siema({
  selector: '.slider'
})
3 年前
回复了 mplungjan 创建的主题 » 3个div隐藏和基本打开按钮单击jquery

如果你移除了 $('.target').show(); 无论点击什么,都会显示所有内容

注:我在初始视图中添加了一个显示:无 

$(function() {
  $('#indexed').click();
});
$('.single').click(function() {
  $('.target').hide();
  $('#div' + $(this).attr('target')).show();
});
.target { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container days">
  <div class="menu">
    <a id="indexed" class="single" target="1">today</a>
    <a class="single" target="2">Yesterday</a>
    <a class="single" target="3">Two Days Ago</a>
  </div>

  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target">content 2</div>
    <div id="div3" class="target">content 3</div>
  </section>
</div>
3 年前
回复了 mplungjan 创建的主题 » setInterval在不使用jquery的情况下逐个更改javascript中元素集的样式

是的,你需要在一段时间内添加和删除一个类

https://jsfiddle.net/mplungjan/pt68Lqoe/ 

const obj = {
offers : [ 
  { price:200, currency:"$", imgURL: "https://picsum.photos/200/200" },
  { price:300, currency:"$", imgURL: "https://picsum.photos/300/200" },
  { price:400, currency:"$", imgURL: "https://picsum.photos/400/200" },
  { price:500, currency:"$", imgURL: "https://picsum.photos/500/200" },
  { price:600, currency:"$", imgURL: "https://picsum.photos/600/200" }
]}


const fy = (a, b, c, d) => { c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d}; // shuffle

fy(obj.offers); // shuffle them

window.addEventListener("load", () => {
  document.getElementById("adSections").innerHTML = obj.offers.slice(0, 4) // take the first 4
    .map(offer => `<section class="adSection"><p>${offer.price}${offer.currency}</p><img src="${offer.imgURL}" />`).join('');

  const sections = document.querySelectorAll(".adSection");
  let cnt = sections.length - 1;
  setInterval(function() {
    sections[cnt].classList.remove("active");
    cnt++;
    if (cnt >= sections.length) cnt = 0;
    sections[cnt].classList.add("active")
  }, 3000)

})
section {
  display: block;
  border: 1px solid white;
  width: 500px
}

.active {
  border: 1px solid black
}

img {
  height: 200px
}
<div id="adSections">


</div>
3 年前
回复了 mplungjan 创建的主题 » 使用javascript或jQuery在数组中搜索和循环?

您可以简单地循环数据以执行此任务。

考虑下面的代码:

如果确定站点id在数据中的对象中是唯一的,则可以添加break语句。 

let siteId = 13;
let dataRows = [
    {"id":23,"site_id":13, "name":"Test 1","date":"2019-01-26T11:02:18.5661283","category":"some cats"},
    {"id":151,"site_id":15, "name":"Test 2","date":"2018-11-04T10:50:53.1756567","category":"some cats"}  
];

let formElements = '';

for(let data of dataRows){
  if(data.site_id == siteId){
    formElements += '<p>'+data.name+'</p>';
  }
}
$('.forms').append(formElements);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="forms"></div>
3 年前
回复了 mplungjan 创建的主题 » 使用javascript或jQuery在数组中搜索和循环?

过滤和映射更简单。我们想一次性更新DOM 

const arr = [{"id":23,"site_id":13, "name":"Test 1","date":"2019-01-26T11:02:18.5661283","category":"some cats"},
{"id":151,"site_id":15, "name":"Test 2","date":"2018-11-04T10:50:53.1756567","category":"some cats"}]

const mySiteId = 13;
$('.forms').append(
  arr
  .filter(({site_id}) => site_id !== mySiteId)
  .map(({name}) => `<p>${name}</p>`).join("")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="forms"></div>
6 年前
回复了 mplungjan 创建的主题 » 如果选中了其他复选框并取消隐藏id,Jquery将复选框添加到元素

几个问题

在openCCField被附加之前,不能检查它是否被选中,所以您需要委托它,或者像我做的那样:将它插入HTML并隐藏它

你把它附加到收音机上,而不是收音机的父级

此外,信用卡/现金文本将被反复添加

你也应该更新jQuery 

$(function() {
  $('#checkoutBillTo').hide();
  $('#add_tipLabel').hide();
  $('#add_tip').hide();
  $('.fec-credit-card-info').hide();
  $('input[id=pmt-authorizenet_aim]').val('cod');

});

$(function() {

  $('#pmt-authorizenet_aim').on("click",function() {
    var text = $('textarea[name="comments"]').val(),
       check = $(this).is(':checked');
    $('#openCCField').toggle(check);
    $('textarea[name="comments"]').val(text.replace(" Cash ","")+ " Credit card ")
  })
  $('#openCCField').on("click",function() {
    var check = $(this).is(':checked');
    $('.fec-credit-card-info').toggle(check);
    $('input[id=pmt-authorizenet_aim]').val(check?'cc':"");
  });
  $('#pmt-cod').click(function() {
    if ($(this).is(':checked')) {
      var text = $('textarea[name="comments"]').val()
      $('textarea[name="comments"]').val(text.replace(" Credit card ","")+ " Cash ")
    }
  });
});
#openCCField { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- bof payment -->
<div id="checkoutPaymentForm" class="split">
  <!-- <h1 id="checkoutPaymentHeading">Step 2 - Payment Information</h1> -->

  <fieldset class="fec-billing-methods fec-block-checkout fec-fieldset" id="checkoutPayment">
    <legend>Billing Details</legend>
    <span class="fec-fieldset-legend">Billing Details</span>

    <!--BILLING ADDRESS-->
    <fieldset id="checkoutBillTo" class="fec-shipping-address fec-shipping-to" style="display: none;">
      <legend>Billing Address</legend>
      <span class="fec-fieldset-legend-two">Billing Address</span>

      <div class="fec-address-container">
        <div id="checkoutBillto">
          <address>Carry Out Customer<br> 3026 East College Avenue<br> Ruskin, FL    33570<br> United States</address>
        </div>
        <a id="linkCheckoutPaymentAddr" href="https://onlineorder.sshorepizza.com/index.php?main_page=checkout_payment_address"><img src="includes/templates/template_default/buttons/english/button_change_address.gif" alt="Change Address" title=" Change Address " width="60" height="24"></a>
      </div>
    </fieldset>



    <strong>We accept:</strong> <img src="includes/templates/template_default/images/icons/cc1.gif" alt="" width="41" height="25"> <img src="includes/templates/template_default/images/icons/cc2.gif" alt="" width="50" height="30"> <img src="includes/templates/template_default/images/icons/cc3.gif"
      alt="" width="50" height="30"> <img src="includes/templates/template_default/images/icons/cc5.gif" alt="" width="50" height="30">

    <span class="fec-fieldset-legend-two">Billing info</span>

    <label class="inputLabel" for="add_tip" id="add_tipLabel" style="display: none;">Would you like to add a tip for the driver?</label>
    <input type="text" name="add_tip" size="5" id="add_tip" style="display: none;"><br class="clearBoth" id="add_tipBreak">


    <!-- <span class="fec-information">Please select a payment method for this order.</span> -->

    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-authorizenet_aim">
      <input type='checkbox' name='myCheckbox' id='openCCField' />
    </div>

    <label for="pmt-authorizenet_aim" class="radioButtonLabel">Credit Card</label>



    <div class="fec-credit-card-info" style="display: none;">

      <div class="fec-field">
        <label for="authorizenet_aim-cc-owner" class="inputLabel">Cardholder Name:</label>
        <input type="text" name="authorizenet_aim_cc_owner" value="Carry Out Customer" id="authorizenet_aim-cc-owner" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-number" class="inputLabel">Credit Card Number:</label>
        <input type="text" name="authorizenet_aim_cc_number" id="authorizenet_aim-cc-number" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-expires-month" class="inputLabel">Expiry Date:</label>
        <select name="authorizenet_aim_cc_expires_month" id="authorizenet_aim-cc-expires-month" onfocus="methodSelect('pmt-authorizenet_aim')">
          <option value="01">January - (01)</option>
          <option value="02">February - (02)</option>
          <option value="03" selected="selected">March - (03)</option>
          <option value="04">April - (04)</option>
          <option value="05">May - (05)</option>
          <option value="06">June - (06)</option>
          <option value="07">July - (07)</option>
          <option value="08">August - (08)</option>
          <option value="09">September - (09)</option>
          <option value="10">October - (10)</option>
          <option value="11">November - (11)</option>
          <option value="12">December - (12)</option>
        </select>
        &nbsp;
        <select name="authorizenet_aim_cc_expires_year" id="authorizenet_aim-cc-expires-year" onfocus="methodSelect('pmt-authorizenet_aim')">
          <option value="19">2019</option>
          <option value="20">2020</option>
          <option value="21">2021</option>
          <option value="22">2022</option>
          <option value="23">2023</option>
          <option value="24">2024</option>
          <option value="25">2025</option>
          <option value="26">2026</option>
          <option value="27">2027</option>
          <option value="28">2028</option>
          <option value="29">2029</option>
          <option value="30">2030</option>
          <option value="31">2031</option>
          <option value="32">2032</option>
          <option value="33">2033</option>
        </select>
      </div>

      <div class="fec-field">
        <label for="authorizenet_aim-cc-cvv" class="inputLabel">CVV Number:</label>
        <input type="text" name="authorizenet_aim_cc_cvv" size="4" maxlength="4" id="authorizenet_aim-cc-cvv" onfocus="methodSelect('pmt-authorizenet_aim')" autocomplete="off"> <a href="javascript:popupWindow('http://onlineorder.sshorepizza.com/index.php?main_page=popup_cvv_help')">What's this?</a>        </div>


    </div>
    <div class="fec-box-check-radio">
      <input type="radio" name="payment" value="cod" id="pmt-cod">
    </div>

    <label for="pmt-cod" class="radioButtonLabel">Cash</label>

    <div class="alert"></div>


    <!-- bof doublebox -->
    <!-- eof doublebox -->

  </fieldset>

  <!-- bof Gift Wrap -->
  <!-- eof Gift Wrap -->
</div>
<!-- eof payment -->

<!-- EOF PAYMENT -->

<!-- bog FEC v1.27 CHECKBOX -->
<!-- eof FEC v1.27 CHECKBOX -->
<!-- bof FEC v1.24a DROP DOWN -->
<!-- begin/comments -->

<fieldset class="fec-fieldset fec-block-checkout split" id="checkoutComments">
  <legend>Special Instructions / Order Comments</legend>
  <span class="fec-fieldset-legend">Special Instructions / Order Comments</span>

  <textarea name="comments" cols="45" rows="3"></textarea> </fieldset>
<!-- end/comments -->
5 年前
回复了 mplungjan 创建的主题 » 是否可以使用javascript/jquery选择包含target=“_blank”的网页中的所有锚标记?[副本]

怎么样 querySelectorAll 

document.querySelectorAll('a[target="_blank"]')

这样地 

document.querySelectorAll('a[target="_blank"]').forEach(lnk => console.log(lnk.href))
<a href="x">x</a><br/>
<a href="https://wclink.co/link/22523/121674/4/83501" 
data-store="Frontgate" data-vars-store="Frontgate" 
data-vars-outbound-link="https://wclink.co/link/22523/121674/4/83501" rel="nofollow" 
target="_blank" 
data-gtm-trigger="callout_product_link_button"><span>$30</span> from <span>Frontgate</span></a><br/>
<a href="y">y</a>
» mplungjan 创建的更多回复
关于   移动版
Py学习 - 专注于Python技术发展的社区(原Django社区)
沪ICP备11025650号