logo标签列表

jQuery removeClass 触发，但未删除类

javascriptjqueryhtml
3
我正在使用一个日期选择器脚本来为表单中的一些文本输入添加功能。该表单位于由表格中的按钮触发的模态框中。当我使用导出到csv的脚本时，我遇到了问题，日期选择器显示在我的csv中并破坏了一些内容。
因此，我认为最简单的解决方案是在导出时删除datepicker类，但这并没有起作用。
我已经向jQuery代码中添加了一个警报以确保它正在触发。果然，它正在触发。由于某种原因，它就是不会删除那个类。有什么建议可以修复removeClass，或者更好的是，如何确保日期选择器不会显示在我的csv中。
这是包含表单的模态框：
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog controls" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title bold" id="controlsModalLabel">Edit Entry</h4>
      </div>
      <div class="modal-body">
        <h3 class="center">You are about to edit entry for</h3><br/>
        <h3 class="alert login"></h3>
        <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
          <input id="_csrf" type="text" name="_csrf" hidden="hidden"/>
          <input class="la_id form-control" type="hidden" name="la_id"/>
          <label class="bold">Start date:</label>
          <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>
          <label class="bold">End date:</label>
          <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>
          <label class="bold">SIM link:</label>
          <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required"/><br/>
          <label class="bold">Notes:</label>
          <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
          <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

jQuery 代码：

$('#export').on('click', function(){
  $('.date').removeClass('datepicker');
});
导出为CSV脚本：
function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tbody tr,table thead tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td,th");

        for (var j = 2; j < cols.length; j++) 
            row.push(cols[j].innerText.trim());

        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename+(new Date().getTime())+".csv");
}
1
你确定$('.date')对象是否存在？尝试使用console.log($('.date').length+' '+$('.date').val())来检查一下。 - Pedro Serpa
1
如果你销毁datepicker对象，那不是更容易吗？ $( '.date' ).datepicker( 'destroy' ); - Mojo Allmighty
尝试过了，结果一样。 - doriansm
1
它在顶部。我可以发布整个页面，如果有帮助的话。但我可以保证它在那里。 - doriansm
2
你能否发布完整的代码或简化后的代码，以演示你的错误，这样我们就可以更容易地进行调试，而不是猜测错误可能出现在哪里。 - coderz
显示剩余6条评论
6个回答
1
似乎日期选择器使用了 <table> 标记（jQuery UI datepicker 就是这样做的）。你可以简单地给 CSV 表格添加 ID 或类，并修改导出到 CSV 的代码以仅针对该表格的内容进行操作，而不是试图隐藏日期选择器：
<table id="csv-table" class="csv-table">


var rows = document.querySelectorAll("table#csv-table tbody tr, table#csv-table thead tr");
// or
var rows = document.querySelectorAll("table.csv-table tbody tr, table.csv-table thead tr");

请注意，隐藏或删除元素中的类不会使其“消失”。
0

以下是使用jQuery的方法。我已经简化了你的问题，以便回答更简单明了。

$(document).ready(function () {
   $('#export').on('click', function () {
       $('.date').removeClass('datepicker');
   });
});
.datepicker {
 background: #1884c3;
 padding: 5px 2px;
}

.date {
  color: #ce8177;
  font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="export" name="export-button">Export</button><br/>

<label class="bold">Start date:</label>
<input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>

<label class="bold">End date:</label>
<input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>

0

我不知道你在使用哪个日期（时间）选择器。但我非常确定问题是插件创建了多个元素 - 所以仅仅删除类属性是不足以摆脱所有元素的。

看一下这里：

如何完全删除jQuery UI日期选择器？

0
我简化了你的示例（即...没有模态框和CSV），以便给你一个removeClass jQuery调用的工作示例。你没有删除类的原因是你必须等待DOM就绪事件，在绑定点击事件之前再执行。在我发布的示例代码中，你会注意到你的版本和一个带有document.ready绑定的版本的点击事件。你拥有的版本将无法删除类，但DOM准备就绪的版本将可行。希望这可以帮助你。
<style>
    .date {
        background-color: purple;
    }

    .datepicker {
        background-color: blue;
    }

</style>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>

    //$(document).ready(function () {
    //    $('#export').on('click', function () {
    //        $('.date').removeClass('datepicker');
    //    });
    //});


    $('#export').on('click', function () {
        $('.date').removeClass('datepicker');
    });

</script>

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <button id="export" name="export">Export</button>

    <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
        <input id="_csrf" type="text" name="_csrf" hidden="hidden" />
        <input class="la_id form-control" type="hidden" name="la_id" />
        <label class="bold">Start date:</label>
        <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required" /><br />
        <label class="bold">End date:</label>
        <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date" /><br />
        <label class="bold">SIM link:</label>
        <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required" /><br />
        <label class="bold">Notes:</label>
        <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
        <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
        </div>
    </form>
</div>
0

导出按钮的 jQuery 事件应该像下面给出的代码：

$(document).ready(function () {
   $('#export').on('click', function () {
       $('.date').removeClass('datepicker');
   });
});

这肯定会移除该类。但如果不起作用，可以尝试使用这个库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0

我不确定您使用的是哪个日期选择器。但是日期选择器插件可能已经将输入附加到缓存中并调用了日期选择器。然后，您可以像下面这样 noop 它的功能：

var exported = false;
$('#export').on('click', function(){
  exported = true
});

$('.datepicker').on('click', function() {
  if(exported) return $.noop();
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接