时间戳

首页 > 解决方案 > 如何将 html id 更改为变量 Laravel

javascript - 如何将 html id 更改为变量 Laravel

问题描述

我有这段 html 代码行，<span id="mycount"></span>它显示数据库中的实时数据（数字），所以假设它显示数据库中的 5。我想要做的是使用这样的 if 语句@if(5 > 0)。那么是否有可能将其更改id="mycount"为变量或任何其他方式以便我可以使用 if 语句？

html

<span id="mycount"></span>  //This displays 5

我想要这样的东西

 @if(5 >0)
 //display data
 @else
 @endif

Javascript

function getCount() {
$.ajax({
type: "GET",
url: '{{route('live.review')}}',
success: function(data) {
    $('#mycount').html(data);
   setTimeout(getCount, 1000);
}
});

}
getCount();

标签： javascriptphpjquerylaravellaravel-5

解决方案

您可能不想使用刀片来处理这种情况，因为您在前端使用 ajax 来控制 DOM 的这个组件。我将在您的情况下使用的替代方法是：

const axios = require('axios');

async function getCount() {
 try {
   const data = axios.get('{{route('live.review')}}');
   const elCount = document.getElementById('#mycount');
   if (data > 0) {
     // const elText = document.createTextNode(data);
     // elCount.appendChild(elText);
     elCount.style.visibility = 'visible';
     elCount.innerHTML(data);
     return;
   }
   elCount.style.visibility = 'hidden';
 } catch (e) {
   window.console.error('Error! ', e.message);
 }
}

setTimeout(getCount, 1000);

使用 Ajax

function getCount() {
  jQuery.ajax({
    type: 'GET',
    url: '{{ route("live.review") }}',
    success: (data) => {
      const elCount = jQuery('#myCount');
      if (data > 5) {
        elCount.html(data);
        elCount.show();
        return;
      }
      elCount.hide()
    },
    error: (error) => {
      window.console.error('Error! ', error.message)
    },
  });
}

setTimeout(getCount, 1000)

确保请求的返回总是好的，因此，为了保证，每次发出请求时，都将请求结果记录在日志中以作保证window.console.log(data)（当然是在开发环境中！）

推荐阅读