Question

大家好，很抱歉我的英语非常糟糕。

我正在开发一个以JavaScript框架为前端的ASP.NET MVC项目。

我有一个表，其中包含从数据库中检索的客户名称。现在我想显示一个模态对话框，并根据单击的客户名称设置其标题的文本。同时我想获得客户ID。例如，单击“Georges”时，弹出模态对话框，其标题文本设置为“Georges”。

这是我的代码。

客户表格如下：

<div class="col-lg-6">
  <div class="container-fluid" id="DailyTask">
    <h4>Daily Tasks</h4>
    @if (Model != null)
    {
      List<SchedulerTool.Models.spGetDailyBatchTask_Result> batches = Model.DailyTask;

      foreach (var batch in batches)
      {
        <div class="bs-callout bs-callout-warning" id="dailybatch">
          <input name="currentdailyBatchId" id="@batch.BatchId" hidden type="text" value="@batch.BatchId" />
          <input name="currentdailyBatchName" id=" @batch.BatchName " hidden type="text" value=@batch.BatchName />
          <button class="btn btn-group-justified" id="dailybatchTask" data-title="@batch.BatchName" data-target="#dailybatchTaskModal" data-toggle="modal" data-bid="@batch.BatchId"> 
            <span class="fa-bitbucket-square" id="name">@batch.BatchName</span>
          </button>
        </div>
      }
    }
  </div>

JavaScript代码是：

$('dailybatchTask').on('click', function ()
{    
    var  batchId = $(this).data('bid');
    var batchName = $(this).data('title');

    // Here I set the table name a template table                        
    $("h4 a#bathDailyTaskModalLabel").html(batchName);

    // Here I set the Id to a template table                                   
    loadMasterTable("LoadObjectsNotBatched", batchId, DailyBatchElementUrl, "DailyBatchCollapseElementId");
});

客户表：

点击客户时弹出的模式：

问题是：当我点击customer表的第一个元素时，正确显示了模态（标题和id是正确的）但是当我点击其他元素时，不会执行JavaScript代码。

希望有人能够尝试理解我的问题并帮助我！

Answer 1

您正试图通过ID捕获所有按钮。但在HTML中，ID必须是唯一的。因为jquery你的点击事件只匹配第一个数据。你需要在jquery part之前修复id。如果你真的需要它，你可以定义一个循环计数器并像这样使用它;

ID =＆＃34; dailybatchTask- @计数器＆＃34;

但是你已经定义了数据出价，所以基本上你可以像这样为按钮添加一个类名;

class =＆＃34; btn btn-group-justified daily-batch-button＆＃34;

那么只有你需要;

  apply plugin: 'com.android.application'
android {
    compileSdkVersion 24
    buildToolsVersion "25.0.0"

    defaultConfig {
        applicationId "[ MY PACKAGE ]"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

    dexOptions {
        javaMaxHeapSize "4g"
    }


}
android {
    useLibrary 'org.apache.http.legacy'
}

repositories {
    jcenter()
    maven {
        url "https://jitpack.io"
    }
}

dependencies {
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'org.apache.httpcomponents:httpcore:4.4.1'
    compile 'org.apache.httpcomponents:httpclient:4.5'
    compile 'com.github.deano2390:android-viewbadger:1.0.0'
    compile('com.jakewharton:butterknife:8.6.0') {
        exclude module: 'support-compat'
    }
    compile project(':Library_MobilePaymentSDK')
    testCompile 'junit:junit:4.12'
    compile 'com.facebook.android:facebook-android-sdk:4.0.0'
    compile 'com.github.aakira:expandable-layout:1.4.2@aar'
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    compile 'com.android.support:cardview-v7:24.2.1'
    compile 'com.google.android.gms:play-services:10.0.0'
    compile 'com.google.firebase:firebase-messaging:10.0.0'
    compile 'com.google.firebase:firebase-core:10.0.0'
    compile 'com.android.support:multidex:1.0.1'
    compile 'com.mcxiaoke.volley:library:1.0.19'
    compile 'com.android.support.test.espresso:espresso-core:2.2.2'
    compile 'rongi.rotate-layout:rotate-layout:2.0.0'
    compile 'com.roomorama:caldroid:3.0.1'
    compile 'com.maksim88:PasswordEditText:v0.9'
    compile 'com.squareup.retrofit:retrofit:1.9.0'
    compile 'gun0912.ted:tedpermission:1.0.3'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.jcmore2.appcrash:appcrash:1.1.0'
    compile 'com.github.stfalcon:smsverifycatcher:0.2'
    compile 'com.github.javiersantos:BottomDialogs:1.2.1'
    testCompile 'junit:junit:4.12'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.6.0'
    compile files('libs/mpaysdk-sandbox-1.0.28.jar')
}

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.jakewharton.butterknife'

如何根据Table元素及其ID设置模态对话框的标题文本

1 个答案: