javascript - 使用 queryselector 动态更改 jQueryUI 的标题

Question

我在更改 jQueryUI 对话框的标题时遇到了问题，因为我不知道如何使用 queryselector 来选择它。我成功地替换了正文的文本，但没有替换标题的文本。

请检查代码并让我知道我应该在 querySelector 中输入什么以更改标题的 Lorem Ipsum。谢谢！

$(function() {
  $(".images").find("a").eq(1).on('click', function(e) {
    e.preventDefault();
    $("#texts").dialog({
      autoOpen: false,
      open: function(e) {
        $('body').addClass('modal');
      },
      close: function(e) {
        $('body').removeClass('modal');
      }
    });
    /*setTimeout(() => {
      //close dialogue
      /* $(dialog).dialog("close") */
      //redirect to new window
      //window.open($(this).prop("href"), "_blank"); //new window
      /*window.location.href = $(this).prop("href");
    }, 60000);*/
    $("#texts").dialog("open");
  });
});

const findUrl = "https://www.example.com/es/Pages/examplefr.html";

const titles = {
  "en": "Title EN",
  "fr": "Title FR",
  "es": "Title ES"
};

const langs = {
  "en": "A very long text in English to replace existing text",
  "fr": "Je ne parle pas français",
  "es": "No hablo español."
};

if (!findLanguage()) console.log("The match was not found");

//change content of the jQuery dialog box
function findLanguage() {
  var result = /\.com\/(\w{2})\//.exec(findUrl);
  if (result && result[1] in langs) {
    console.log("The text match has been found!");
    document.querySelector("#texts p").textContent = langs[result[1]];
    return true;
  }
}
//change the title of the jQuery dialog box
function findTitleLanguage() {
  var results = /\.com\/(\w{2})\//.exec(findUrl);
  if (results && results[1] in titles) {
    console.log("The title match has been found!");
    //querySelector for the title of jQueryUI dialog
    document.querySelector("what to insert here?").textContent = titles[result[1]];
    return true;
  }
}

#texts {
  display: none;
}

img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}

.modal {
  background-color: pink;
}

.modal:after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
}

<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="modal-body">
  <div class="images">
    <a href="https://www.example.net">
      <img src="https://images.pexels.com/photos/5214132/pexels-photo-5214132.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    <a href="https://www.google.com/ncr">
      <img src="https://images.pexels.com/photos/4995558/pexels-photo-4995558.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    </a>
  <div id="texts" title="Lorem ipsum">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
  </div>

标签： javascriptjquery

Answer 1

您可以使用对话框选项：

$("#texts").dialog( "option", "title", titles[results[1]] );

$(function() {
    $(".images").find("a").eq(1).on('click', function(e) {
        e.preventDefault();
        $("#texts").dialog({
            autoOpen: false,
            open: function(e) {
                $('body').addClass('modal');
            },
            close: function(e) {
                $('body').removeClass('modal');
            }
        });
        $("#texts").dialog("open");
        findTitleLanguage();
    });
});

const findUrl = "https://www.example.com/es/Pages/examplefr.html";

const titles = {
    "en": "Title EN",
    "fr": "Title FR",
    "es": "Title ES"
};

const langs = {
    "en": "A very long text in English to replace existing text",
    "fr": "Je ne parle pas français",
    "es": "No hablo español."
};

if (!findLanguage()) console.log("The match was not found");

//change content of the jQuery dialog box
function findLanguage() {
    var result = /\.com\/(\w{2})\//.exec(findUrl);
    if (result && result[1] in langs) {
        console.log("The text match has been found!");
        document.querySelector("#texts p").textContent = langs[result[1]];
        return true;
    }
}
//change the title of the jQuery dialog box
function findTitleLanguage() {
    var results = /\.com\/(\w{2})\//.exec(findUrl);
    if (results && results[1] in titles) {
        console.log("The title match has been found!");

        $("#texts").dialog( "option", "title", titles[results[1]] );

        return true;
    }
}

#texts {
    display: none;
}

img {
    width: 300px;
    height: 250px;
    object-fit: cover;
}

.modal {
    background-color: pink;
}

.modal:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="modal-body">
    <div class="images">
        <a href="https://www.example.net">
            <img src="https://images.pexels.com/photos/5214132/pexels-photo-5214132.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
            <a href="https://www.google.com/ncr">
                <img src="https://images.pexels.com/photos/4995558/pexels-photo-4995558.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                     alt="">
            </a>

            <div id="texts" title="Lorem ipsum">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus
                    hic? Ut eos blanditiis quis provident.</p>
            </div>
        </a>
    </div>
</div>