Question

我有HTML和CSS标签，我希望使用ajax文件中的.txt请求在每个标签下加载文字内容。这意味着当我们点击任何标签时，它会从.txt文件加载文本内容。第一次激活标签时将加载内容。第一个标签已经激活，文字内容已加载并显示在第一个标签下，但我的问题是，但是当我点击第二个或第三个标签时，它不会加载文本内容。代码在此处显示：http://testweb.epizy.com/ajax-load/index.html

Answer 1

如果将单选按钮的ID设置为与文件名相同，即tab1，tab2和tab3，则结果JavaScript代码可能如下所示：

$(document).ready(function () {
  const SELECTOR = '[type=radio]';

  function loadData(tabId) {
    $.ajax({
      url: `${tabId}.txt`,
      dataType: "text",
      async: false,
      success: (data) => {
        $(`.${tabId}`).html(data);
      }
    });
  }

  const checkedTabId = $(`${SELECTOR}:checked`).prop('id');
  loadData(checkedTabId);

  $(SELECTOR).change(function () {
    if (this.checked) {
      loadData(this.id);
    }
  });
});

它只是一个简短的例子，说明如何改进代码。

JSFiddle example

Answer 2

看看JQuery load function。由于您还没有提供任何代码，我无法为您提供更好的帮助。

这是你的代码：

 $(document).ready(function() {
      if ($("#one").is(":checked")){
          $.ajax({
              url : "tab1.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab1").html(data);
              }
          });
      };
      if ($("#two").is(":checked")){
          $.ajax({
              url : "tab2.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab2").html(data);
              }
          });
      };
      if ($("#three").is(":checked")){
          $.ajax({
              url : "tab3.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab3").html(data);
              }
          });
      };
    });

你应该这样做，添加：

  $(document).ready(function(){
    function loadText(){
      if ($("#one").is(":checked")){
           $.ajax({
             url : "tab1.txt",
             dataType: "text",
             async:false,
             success : function (data) {
               $(".tab1").html(data);
            }
         });
       }
       if ($("#two").is(":checked")){
          $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
              $(".tab2").html(data);
            }
         });
      }
      if ($("#three").is(":checked")){
          $.ajax({
          url : "tab3.txt",
          dataType: "text",
          async:false,
          success : function (data) {
              $(".tab3").html(data);
          }
        });
      }
    }
    $('input[type="radio"]').change(loadText);
  });

Answer 3

查看您的源代码，我看到您的JavaScript应该在＆＃34;检查＆＃34;按钮2和3的属性已设置，但checked属性用于无线电选择中的默认选项 - 不适用于当前选定的选项。更改选项卡时，第一个按钮仍将具有checked属性，因为它始终是默认值。有关详细信息，请参阅this link。

我将您的javascript更改为以下内容：

<script>
    $(document).ready(function() {
        if ($("#one").is(":checked")){
            $.ajax({
                url : "tab1.txt",
                dataType: "text",
                async:false,
                success : function (data) {
                    $(".tab1").html(data);
                }
            });
        };
    });
    function loadOne() {
        $.ajax({
            url : "tab1.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab1").html(data);
            }
        });
    }
    function loadTwo() {
        $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab2").html(data);
            }
        });
    }
    function loadThree() {
        $.ajax({
            url : "tab3.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab3").html(data);
            }
        });
    }
</script>

然后在三个按钮上添加一个onclick事件（如果<input>或<label>上有这个，则不是肯定的），因此为第一个按钮添加onclick=loadOne()，loadTwo（）为第二个，而loadThree（）为第三个。

我的代码可能有点多余，我有点像初学者，但希望这会有所帮助。

使用ajax加载文本文件内容

3 个答案: