点击按钮即可获得卡的详细信息

Question

我有一张我网站的卡片列表，所有卡片都包含一个提交按钮。我希望在单击提交按钮时，我可以获得卡的详细信息，例如交换机的状态以及该特定卡上的设备名称。我如何实现这一目标？

以下是我的卡片的样子。我们假设我在每张卡片上都放了一个按钮，然后我希望在点击该按钮时发生这种情况。

这是我的卡的结构，但我不知道如何实现上述所说的东西，因为我没有能够从任何东西开始

<div class="row"> 
   <div class="col s12 m6"> 
       <div class="card"> 
         <div class="card-content white-text"> 
           <span class="card-title">Air Conditioner</span> 
         </div> 
         <div class="card-action" id="action"> 
            <div id="status">ON</div> 
              <div class="switch"> 
                 <label> on <input type="checkbox"> <span class="lever"></span> off </label> 
              </div>
             </div> 
        </div> 
      </div> 
   </div> 

我将不得不得到社区的迅速回应！ ：d

Answer 1

编辑：

您还没有提供太多信息或显示您正在使用的任何代码，因此我将提供一般性答案，并假设您正在使用jQuery。

所以，说你有这样一张卡片：

HTML：

<div class="card">
    <input id="checkbox-1" type="checkbox">

    <button id="button-1">Get value</button>
</div>

您可以使用jQuery获取值：

// Wait for jQuery to load,
$(document).ready(function() {
    // when #button-1 is clicked,
    $("#button-1").click(function () {
        // save the value of #checkbox-1 as a variable,
        var myValue = $("#checkbox-1").is(':checked');
        // and test it to confirm it worked.
        console.log(myValue);
    });
});