jquery 文案替换

Question

  let cx = marker.cLeft * ratioW,
    cy = marker.cTop * ratioH,
    rx = marker.cRight * ratioW,
    ry = marker.cBottom * ratioH,
    detail = marker.detail;

  var _marker = $(
    "<div class='zoom-marker' draggable='false' style='position: absolute;border: 3px solid #ff3f3f;z-index:99999;pointer-events: none';>" +
      "<div class='markerText' style='margin-top: -50px;margin-left: -20px;color: #ff3f3f;font-size:30px'>asdfasdf</div>" +
      "</div>"
  );
  _marker.width(Math.abs(cx - rx));
  _marker.height(Math.abs(cy - ry));
  // $("#markerText").text(marker.detail);
  // document.querySelector(".markerText").innerText = marker.detail;

Answer 1

你自己几乎都要写出来了

$(".markerText", _marker).text(marker.detail);

1. class 是使用 . 前缀
2. $(,) 第 2 个参数限定查找范围，参阅文档

Answer 2

1、如果有babel或者不考虑低版本浏览器，可以

var _marker = $(`
  <div class='zoom-marker' draggable='false' style='position: absolute;border: 3px solid #ff3f3f;z-index:99999;pointer-events: none';>
    <div class='markerText' style='margin-top: -50px;margin-left: -20px;color: #ff3f3f;font-size:30px'>${detail}</div>
  </div>
`);

2、没有babel，并且要兼容低版本浏览器，可以字符拼接

var _marker = $(
  "<div class='zoom-marker' draggable='false' style='position: absolute;border: 3px solid #ff3f3f;z-index:99999;pointer-events: none';>" +
    "<div class='markerText' style='margin-top: -50px;margin-left: -20px;color: #ff3f3f;font-size:30px'>" + detail + 
  "</div></div>"
);