javascript - 如何在单击时捕获 div 的 id 并将其传递给函数以使代码动态化？

Question

我有一个基于 CoffeeScript 的代码，其中所有定义(ID 和类)都在本地调用。现在我希望它基于动态 View 重构它，即用户在网站中单击时，应该将相应的 ID 发送到该函数。我该如何处理这个问题？

HTML -

<div id="dl1">
 <div class="dl_div">
  <div id="target1" data-key="<%= @aws_url1[:key] if !@aws_url1.nil? %>">
  <% if !@aws_url1.nil? %>
   <img id="user_dl1" src="<%= @aws_url1[:url] %>">
  <% end %>
 </div>
 <div id="close1" style="display: none;">
  <button id="closebtn1" class="closebtn">X</button>
 </div>
 <div id="closemsg1" style="display: none;  position: relative;">
  <button  id="deletebtn1" class="deletebtn">
   <p class="deletebtnstyle">Delete</p>
  </button>
  <button id="cancelbtn1" class="cancelbtn">
   <p class="cancelbtnstyle">Cancel</p>
  </button>
</div>
<div class="file_browser1" id="file_browser1">
  <label for="file_upload1" class="custom-file_upload z-depth-1">
   <i class="material-icons">&#xE147;</i>
   <p class="button-text"> Upload Here</p>
  </label>
<form id="user_id1_form" action="">
  <input type="hidden" name="user_id1_key" value="<%= @aws_urls[0][:key] %>"/>
  <input id="file_upload1" type="file" accept="image/*" name="user_id1"/>
 </form>
 </div>
 </div>
</div>

CoffeeScript -

if $('#target1 img').length == 1
        $('#file_browser1').addClass 'none'
        $('#close1').addClass 'delete'
        $('#closebtn1').on 'click', (e) ->
                $('#closemsg1').addClass 'msg'      
        $('#cancelbtn1').click ->
                $('#closemsg1').removeClass 'msg'
        $('#deletebtn1').click ->
                $('#close1').removeClass 'delete'
                $('#closemsg1').removeClass 'msg'
                $('#target1 > img').hide()
                $('#file_browser1').removeClass 'none'
                $('#file-upload1').val('')
                return

    $('#file_upload1').on 'change', (event) ->
        files = event.target.files
        image = files[0]
        old_key = $("#target1").data("key");
        new_key = null
        $user_id1 = $('#file_upload1')[0].files[0];
        console.log image.size
        reader = new FileReader
        $.ajax({
            type: "GET",
            url: "http://localhost:3000/users/get_url/13",
            success :(data) ->
                new_key = data[0].key
                processfile $user_id1,(result)->
                    console.log data[0].url
                    $user_id1 = dataURItoBlob(result)
                    reader1 = new FileReader()
                    reader1.readAsArrayBuffer($user_id1)
                    reader1.onload = (e) ->
                        rawData1 = reader1.result;
                        $.ajax({ 
                            url: data[0].url, 
                            type: 'PUT',
                            xhr: -> 
                                myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload)
                                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                                return myXhr;
                            ,
                            success: completeHandler,
                            error: errorHandler,
                            data: rawData1,
                            cache: $.param(false),
                            contentType: "binary/octet-stream",
                            processData: $.param(false)
                        }, 'json');
        })

        completeHandler = (data) ->
            $.ajax({
                type: "POST",
                url: "http://localhost:3000/users/user_documents/13",
                data: { 
                    aws_key_new: new_key,
                    aws_key_old: old_key,
                    dl_id: "dl",
                },
                success: ->
                    a = $('#target1')
                    console.log a.data("key")
                    console.log new_key
                    a.attr('data-key', new_key);
            })

            success :(data) ->
                alert "complete"
                return

            error :(data) ->
                alert "failed"
                return

        errorHandler = (data) ->
            console.log data
            alert "failed"

        progressHandlingFunction = (data) ->

        reader.onload = (file) ->
            img = new Image
            img.src = file.target.result
            $('#target1').html img
            $('#file_browser1').addClass 'none'
            $('#close1').addClass 'delete'
            $('#closebtn1').on 'click', (e) ->
                    $('#closemsg1').addClass 'msg'      
            $('#cancelbtn1').click ->
                    $('#closemsg1').removeClass 'msg'
            $('#deletebtn1').click ->
                    $('#close1').removeClass 'delete'
                    $('#closemsg1').removeClass 'msg'
                    $('#target1 > img').hide()
                    $('#file_browser1').removeClass 'none'
                    $('#file-upload1').val('')
                    return
            return

        reader.readAsDataURL image
        console.log files
        return

如何在点击时将 ID 传递给 CoffeeScript ？

Answer 1

如果我从您的问题中了解到，您希望将点击事件添加到一组元素，并能够在触发时获取它们各自的值。

一种方法是将点击事件添加到属性类中:

例如(使用jquery):

// Add click event to the class .drill_cursor
$(".drill_cursor").click(function(){
  console.log(this.id);
});

// Used to display console.log
var consoleLine = "<p class=\"console-line\"></p>";
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};

.console-line {
  font-family: monospace;
  color: red;
  margin: 2px;
}
.drill_cursor {
  margin: 50px;
  color: blue;
}

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

<body>
  <div id="console-log"></div> 

  <div id="id-div-1" class="drill_cursor" >div-1-click-on-me</div>
  <div id="id-div-2" class="drill_cursor" >div-2-click-on-me</div>
  <div id="id-div-3" class="drill_cursor" >div-3-click-on-me</div>
  <div id="id-div-4" class="drill_cursor" >div-4-click-on-me</div>

</body>

另一种方法是将事件委托(delegate)给另一个元素标签:

您可以在此处找到有关委托(delegate)事件的更多信息:

api.jquery.com/delegate

对于某些情况，委托(delegate)事件是动态添加事件的更好方法!

希望对你有帮助! 祝你好运!