Dacre Denny的社区主页

Dacre Denny 最近回复了

6 年前

回复了 Dacre Denny 创建的主题 » 在jquery中创建JSON变量

如果我正确地理解了您的问题,您可以通过提取 start 和 end 日期作为字符串 <input/> 元素的jQuery如下:

const [start, end] = $(this).val().split(',');

然后可以通过 utc() 方法如下:

/* Declare results array */
const avail_fruits = [];

/* Iterate each input with avails class*/
$('.avails').each(function() {
  
  /* Extract start,end date string from input value */
  const [start, end] = $(this).val().split(',');
  
  /* Parse start,end date strings with moment. Use utc()
  to avoid timezone conversion */
  avail_fruits.push({
    start : moment.utc(start, 'DD/MM/YYYY'),
    end : moment.utc(end, 'DD/MM/YYYY')
  });
  
});

console.log(avail_fruits)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<input type="hidden" name="avail" class="avails" value="10/03/2017,18/03/2017"> 
<input type="hidden" name="avail" class="avails" value="01/04/2017,05/04/2017"> 
<input type="hidden" name="avail" class="avails" value="11/04/2017,15/04/2017">

5 年前

回复了 Dacre Denny 创建的主题 » jquery:拖动而不单击

这里要解决的主要问题是区分一个正则 click 事件打开 #content ,来自其他“类似于单击的事件”,这些事件也在被拖动的元素完成时触发。

你的代码目前有一种方法,你可以为你想要的行为重新设定目标:

if (! $(this).hasClass('ui-draggable-dragging')) {
   /* This was a "regular click event"
}

因此,对于您的代码,您可以修改如下:

$(function() {

  /* Combine on ready logic into one place */

  $("#button").draggable({
    stack: 'div',
    containment: "body"
  });
  
  $("#content").draggable({
    stack: 'div',
    containment: "body"
  });
  
  /* Hide all trip elements except for first */
  $('.trip', '#content').not(':first').hide();
});

$('#button').on('mouseup', function() {
  if (!$(this).hasClass('ui-draggable-dragging')) {
    $("#content").toggle();
  }
});

$('#content').on('mouseup', function() {

  /* Reuse same logic in #button mouseup handler */
  if (!$(this).hasClass('ui-draggable-dragging')) {

      /* 
      If content element if not dragging, treat mouse up as conclusion
      of click event and rotate visibility of trip elements like this
      */
      let trip = $('.trip:visible', '#content');
      let next = trip.next().length === 0 ? 
          $('.trip:first', '#content') : trip.next();
      
      trip.hide();
      next.show(); 
  }
});

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  background-color: grey;
}

#button {
  width: 100px;
  height: 100px;
  background-color: cyan;
}

#content {
  display: none;
  cursor: all-scroll;
  top: 10%;
  left: 10%;
  position: absolute;
}

.trip {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
}

<div id="button">Button</div>

<div id="content">
  <div class="trip">div 1</div>
  <div class="trip">div 2</div>
  <div class="trip">div 3</div>
</div>

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

5 年前

回复了 Dacre Denny 创建的主题 » 对jquery选择器感到困惑

什么时候? [0] 是在jquery对象之后添加的,这使您可以直接访问这个jquery对象表示(或包装)的第一个真正的dom元素。对于您的代码,您可以按如下方式将其分解:

/* A JQuery object that reprsents or "wraps" #123 */
const inputJQueryObject = $("#123");

/* Accessing the first true/real DOM element the JQuery object represents */
const inputDOMElement = inputJQueryObject[0];

/* Accessing the current value of the DOM element */
const inputDOMElementValue = inputDOMElement.value;

console.log(inputDOMElementValue);

或者,您可以使用jqueries .val() 访问当前值的方法 #123 ,避免了 [0].value 通过这样做:

console.log( $("#123").val() );

希望有帮助!

6 年前

回复了 Dacre Denny 创建的主题 » 输入数字并使用jquery查找最大和最小的数字

如果我理解正确,您需要完成上面的代码,以便 largest() 可以调用函数来标识输入之间的最大数目 id="N" 和 id="M" .

一种方法可能是引入 <button> 元素,并使用jquery绑定 click() 它的处理程序将调用 大() 像这样:

function largest() {
  var num1, num2;

  /* Update to use jQuery style selectors */
  num1 = Number($("#N").val());
  num2 = Number($("#M").val());

  if (num1 > num2) {
    window.alert(num1 + " from N is largest and " + num2 + " from M is lowest");
  } else if (num2 > num1) {
    window.alert(num2 + " from M is largest and " + num1 + " from N is lowest");
  }
}

/* Get the find-largest button, and add a click event listener which calls the
largest() function */
$("#find-largest").click(function() {

  /* Call the largest() function */
  largest();

  /* Prevent the buttons default behavior */
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>
<div>
  <label>Number N:</label>
  <input id="N" type="number" />
</div>
<div>
  <label>Number M:</label>
  <input id="M" type="number" />
</div>

<!-- Add a button which when clicked calls largest() function -->
<div>
  <button id="find-largest">Find largest</button>
</div>

» Dacre Denny 创建的更多回复