मेरे पास एक नया दस्तावेज़ निर्दिष्ट करने के लिए "नया" शब्द के साथ एक तस्वीर है जिसे हमारी वेबसाइट पर पोस्ट किया गया है। मैं इसे पोस्ट किए जाने के 6 घंटे बाद jQuery को चित्र को हटाना चाहता हूं। मैं ऐसा कैसे कर पाऊंगा?

यहाँ तत्व है:

<tr class="pointer">
    <td>
        <a href="~/DocumentPath" target="_blank"></a>
        <img class="germ"  src="~/Image" width="40px" />
        <i class="created" hidden="hidden">April 3, 2020 13:13:00</i>
        Document Title
    </td>
    <td>PDF</td>
    <td>March 2020</td>
</tr>

जैसा कि आप देख सकते हैं, मेरे पास एक छिपा हुआ <i> तत्व है जो यह बताता है कि दस्तावेज़ को वेबसाइट पर कब पोस्ट किया गया था। मुझे <img> टैग को <i> टैग से 6 घंटे बाद हटाना होगा।

मैं इसे jQuery या जावास्क्रिप्ट का उपयोग करके कैसे कर सकता हूं?

-1
NMeneses 4 अप्रैल 2020, 00:42
1
setTimeout() का प्रयोग करें।
 – 
zero298
4 अप्रैल 2020, 00:44
क्या आप मुझे एक उदाहरण दे सकते हैं?
 – 
NMeneses
4 अप्रैल 2020, 00:45

5 जवाब

यह बेहतर सर्वर-साइड किया जाएगा। जिस तरह से आप इसे करना चाहते हैं, यह मानता है कि उपयोगकर्ता के पास 6+ घंटे के लिए एक ही पृष्ठ होगा, या उसी स्थिति में इस पृष्ठ पर वापस आ जाएगा, जिसकी बहुत संभावना नहीं है।

मैं क्या करूँगा created के लिए पोस्ट में एक संपत्ति जोड़ूंगा और इसे Date.now() का डिफ़ॉल्ट समय निर्धारित कर दूंगा, और फिर फ्रंट एंड कोड देखें कि क्या वह created मान से कम था 6 घंटे पहले (1000 * 60 * 60 * 6 मिलीसेकंड)।

यदि हां, तो 'नया' ग्राफ़िक दिखाएं। यदि नहीं, नहीं।

इसे करने का एक और तरीका है ताकि आपको सर्वर-साइड सामान को अपडेट न करना पड़े जो कि पत्थर में अधिक सेट हो सकता है, "नया" ग्राफिक के सही होने के लिए डिफ़ॉल्ट डिस्प्ले होना है, फिर:

let createdTime = new Date(document.queryselector('i.hidden').textContent);

if (Date.now() - createdTime > (1000 * 60 * 60 * 6)){
    //code to hide the "New" graphic
}

कुछ अतिरिक्त दो सेंट मुफ्त में: मैं यह सुनिश्चित करने के लिए उस छिपे हुए i तत्व में एक id विशेषता जोड़ूंगा कि आप केवल का चयन कर रहे हैं, न कि कुछ और जो हो सकता है एक ही वर्ग

1
R Greenstreet 4 अप्रैल 2020, 01:22

चूंकि आपने पूछा था कि इसे जावास्क्रिप्ट या JQuery के साथ कैसे करें, इस तरह।

मैंने यह दिखाने के लिए 3-सेकंड का उदाहरण भी शामिल किया कि यह काम करता है।

window.setTimeout(function() {
  document.getElementById('sixHours').outerHTML = '';
}, 2160000);

window.setTimeout(function() {
  document.getElementById('threeSeconds').outerHTML = '';
}, 3000);
<div id="sixHours">This will be removed after six hours</div>

<div id="threeSeconds">This will be removed after three seconds</div>

ध्यान रखें, जैसे ही पेज रिफ्रेश होगा, टाइमर शुरू हो जाएगा। यदि आप इससे बचना चाहते हैं और अभी भी जावास्क्रिप्ट इसे संभालना चाहते हैं, तो आप इसे एक निश्चित समय पर हटा सकते थे।

संपादित करें

नीचे दिया गया स्निपेट दिनांक को expiration में पार्स करेगा और उससे अब तक मिलीसेकंड का पता लगाएगा। फिर ऊपर दिए गए स्निपेट की तरह, टाइमर समाप्त होने पर remove तत्व हटा दिया जाएगा। टाइमर को दिए गए समय से 6 घंटे समाप्त करने के लिए 6 घंटे जोड़े जाते हैं।

var expiration = Date.parse(document.getElementById('expiration').innerHTML);
var diff = expiration - Date.now();

window.setTimeout(function() {
  document.getElementById('remove').outerHTML = '';
}, diff + 2160000);
//2160000ms = 6 hours
<div id="expiration">April 3, 2020 20:00:00</div>

<div id="remove">Will be removed by the date above</div>
1
Community 20 जून 2020, 12:12
यह वास्तव में ओपी द्वारा उल्लिखित <i> टैग के मूल्य को स्वीकार नहीं करता है।
 – 
zero298
4 अप्रैल 2020, 01:03
@ जीरो 298, वह चूक गया। मेरा जवाब संपादित किया
 – 
Jack
4 अप्रैल 2020, 01:43

setTimeout() का प्रयोग करें, लेकिन ध्यान रखें कि लोग 6 घंटे के लिए एक पृष्ठ पर बैठने की संभावना नहीं रखते हैं, जिसका अर्थ है कि जैसे ही वे नेविगेट करेंगे, यह विफल हो जाएगा। हर बार रिफ्रेश होने पर आपको भेजे गए समय को बदलना होगा।

const testing = true;

if (testing) {
  // BEGIN - Fake date for testing
  const tmpNow = new Date();
  document.querySelector("i.created").innerHTML = tmpNow.toUTCString();
  // END - Fake date for testing
}

const d = document.querySelector("i.created").innerHTML;
const dd = new Date(d);
if (testing) {
  dd.setSeconds(dd.getSeconds() + 3);
} else {
  dd.setHours(dd.getHours() + 6);
}

const ddd = dd.getTime();
const now = Date.now();

if (ddd < now) {
  console.log("Too late");
}

const dt = Math.max(ddd - now, 0);

setTimeout(() => {
  const img = document.querySelector("img.germ");
  img.parentNode.removeChild(img);
}, dt);
<tr class="pointer">
  <td>
    <a href="~/DocumentPath" target="_blank"></a>
    <img class="germ" src="~/Image" width="40px" />
    <i class="created" hidden="hidden">April 3, 2020 13:13:00</i> 03.21.2020 GOA - Alaska Businesses Now Eligible for SBA Economic Injury Disaster Loans (2)
  </td>
  <td>PDF</td>
  <td>March 2020</td>
</tr>
0
zero298 4 अप्रैल 2020, 01:02

आप यहाँ समस्या को नहीं समझते हैं। जैसा कि आर ग्रीनस्ट्रीट ने कहा था कि इसे सर्वर-साइड करने की जरूरत है। UI को भेजने के लिए आपको एक पोस्ट बनाने की तिथि चाहिए।

आइए मान लें कि आपके पास एक सर्वर से एक JSON आ रहा है जहां आप पोस्ट फॉर्म बाटा बेस की createDate प्रॉपर्टी जोड़ सकते हैं।

{createDate: date, name......}

आपको उस तारीख की तुलना Date.now() से करनी होगी

छद्म कोड यहाँ:

if(createDate + 6 hours >= Date.now()) then hide your Icon.
0
Mike Tsvietukhin 4 अप्रैल 2020, 02:00

स्ट्रिंग को डेट ऑब्जेक्ट में बदलने के लिए आपको दिनांक का उपयोग करना होगा:

new Date("April 3, 2020 13:13:00");

यह एक दिनांक वस्तु बनाएगा, फिर भी चूंकि कोई टाइमज़ोन ऑफ़सेट नहीं है, इसलिए स्क्रिप्ट UTC मान सकती है। आपका परिणाम हो सकता है:

"2020-04-03T13:13:00.000Z"

इसलिए समय क्षेत्र निर्दिष्ट करने पर विचार करें। कुछ ब्राउज़र उपयोगकर्ता स्थानीय टाइमज़ोन मान लेंगे।

$(function() {
  function getDate(cObj, tz) {
    if (tz == undefined) {
      tz = "GMT-07:00";
    }
    var str = cObj.text().trim() + " " + tz;
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
    var nDt = new Date(str);
    console.log(str, nDt);
    return nDt;
  }

  function getHoursPast(thn) {
    // https://stackoverflow.com/questions/19225414/how-to-get-the-hours-difference-between-two-date-objects/19225463
    var now = new Date();
    return Math.floor(Math.abs(now - thn) / 36e5);
  }

  var hours = getHoursPast(getDate($(".created")));
  console.log(hours + " have passed since", getDate($(".created")));
  if (hours > 5) {
    $(".germ").remove();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="pointer">
    <td>
      <a href="~/DocumentPath" target="_blank"></a>
      <img class="germ" src="~/Image" width="40px" />
      <!--
      Would advise better format
      Example: 2020-04-03T13:00.000-7:00
      -->
      <i class="created" hidden="hidden">April 3, 2020 13:13:00</i> Document Title
    </td>
    <td>PDF</td>
    <td>March 2020</td>
  </tr>
</table>

संदर्भ

0
Twisty 4 अप्रैल 2020, 02:00