Question

我试图找出如何将活动的类/ toggle类传递给AJAX以发送到php。我有一个部分，其中div看起来像按钮，允许用户点击一个或多个，然后这将更改为显示它是活动的。我想把通过AJAX点击的那些发送到我的php文件。我成功地通过AJAX发送了我的输入，但我对此感到难过。

按钮如下所示：

所以那些活跃的，我想传递给AJAX。

通过这样做，我的按钮看起来很活跃：

$('.project-option-boxes').click(function() {
  $(this).hide().toggleClass('box_focused').fadeIn('slow');
});

我的HTML

<div class="project-container">
<div class="project-input-container">
<form action="" autocomplete="on" method="POST" id="project-information-form">
    <input type="text" class="input-borderless" id="project-name" placeholder="Your Name">
    <input type="text" class="input-borderless" id="title-roll" placeholder="Title/Role">
    <input type="email" class="input-borderless" id="project-email" placeholder="Email Address">
    <input type="text" class="input-borderless" id="project-number" placeholder="Phone Number">
    <input type="text" class="input-borderless" id="project-company" placeholder="Company/URL">
</div>
<div id="project-scope-container">
    <div id="project-scope-title">PROJECT SCOPE</div>
    <div class="project-option-boxes">BRANDING & IDENTITY</div>
    <div class="project-option-boxes">WEB DESIGN</div>
    <div class="project-option-boxes">RESPONSIVE/MOBILE</div>
    <div class="project-option-boxes">MARKETING ASSETS</div>
    <div class="project-option-boxes">HTML5 ANIMATION</div>
    <div class="project-option-boxes">SEO OPTIMIZATION</div>
    <div class="project-option-boxes">MONTHLY SUPPORT</div>
    <div class="project-option-boxes">WEB DEVELOPMENT</div>
    <div class="project-option-boxes">ECOMMERCE</div>
</div>
    <input type="submit" id="submit-project" value="Send Project Inquiry">
</form>
</div>

到目前为止，对于我的AJAX（输入）我有这个：

$(document).ready(function(){ 
    $("#submit-project").on("click", function (event) {
        event.preventDefault();

        var project_name        = $("#project-name").val();
        var title_roll          = $("#title-roll").val();
        var project_email       = $("#project-email").val();
        var project_number      = $("#project-number").val();
        var project_company     = $("#project-company").val();
        var project_description = $("#project-description").val();
        var project_source      = $("#project-source").val();
        var project_socialMedia = $("#project-socialMedia").val();
        var project_humanTest   = $("#project-humanTest").val();        
        $.ajax({
            url: "email-project.php", 
            type: "POST",
            data: {
                "project_name":         project_name,
                "title_roll":           title_roll,
                "project_email":        project_email,
                "project_number":       project_number,
                "project_description":  project_description,
                "project_source":       project_source,
                "project_socialMedia":  project_socialMedia,
                "project_humanTest":    project_humanTest
            },
            success: function (data) {
                //console.log(data); // data object will return the response when status code is 200
                if (data == "Error!") {
                    alert("Unable to send email!");
                    alert(data);
                } else {
                    $(".project-container").addClass("removeClass");
                    $(".email-success").show();
                    $(".announcement_success").fadeIn();
                    $(".announcement_success").show();
                    $(".light-gray-container").hide();
                   // $('.announcement_success').html('Email Successfully sent!');
                   //$('.announcement_success').delay(5000).fadeOut(400);
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                alert(textStatus + "|" + errorThrown);
                //console.log("error"); //otherwise error if status code is other than 200.
            }
        });
    });
});

任何帮助都将不胜感激。

更新：我尝试了什么。

    var project_company     = $("#project-company").val();
    var project_description = $("#project-description").val();
    var project_source      = $("#project-source").val();
    var project_socialMedia = $("#project-socialMedia").val();
    var project_humanTest   = $("#project-humanTest").val();
    var activeDivs = $('.project-option-boxes.box_focused').map(function(i, el){
        return $(this).html();
    });

    $.ajax({
        url: "email-project.php", 
        type: "POST",
        data: {
            "project_name":         project_name,
            "title_roll":           title_roll,
            "project_email":        project_email,
            "project_number":       project_number,
            "project_description":  project_description,
            "project_source":       project_source,
            "project_socialMedia":  project_socialMedia,
            "project_humanTest":    project_humanTest,
            "activeDivs":           activeDivs
        },

Answer 1

好吧，你可以简单地使用.each()，然后获取div的文本值并将其推入数组。然后将其与数据一起传递给AJAX调用

all_focused = [];
$('.project-option-boxes.box_focused').each(function(){
    all_focused.push($(this).text());
});

//Append to 'data'
$.ajax({
    ...
    data: {
        ...
        "project_scope" : JSON.stringify(all_focused),
        ...

all_focused = [];
$('.box_focused').each(function(){
  all_focused.push($(this).text());
});

console.log(all_focused);

.box_focused {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
    <div id="project-scope-title">PROJECT SCOPE</div>
    <div class="project-option-boxes box_focused">BRANDING & IDENTITY</div>
    <div class="project-option-boxes">WEB DESIGN</div>
    <div class="project-option-boxes box_focused">RESPONSIVE/MOBILE</div>
    <div class="project-option-boxes">MARKETING ASSETS</div>
    <div class="project-option-boxes">HTML5 ANIMATION</div>
    <div class="project-option-boxes">SEO OPTIMIZATION</div>
    <div class="project-option-boxes">MONTHLY SUPPORT</div>
    <div class="project-option-boxes">WEB DEVELOPMENT</div>
    <div class="project-option-boxes">ECOMMERCE</div>
</div>

Answer 2

只需使用.project-option-boxes.box_focused过滤活动的div。然后使用.map()您可以构建一个要发送的数组 -

var activeDivs = $('.project-option-boxes.box_focused').map(function(i, el){
            return $(this).html();
});

然后将activeDivs添加到您的ajax -

    $.ajax({
        url: "email-project.php", 
        type: "POST",
        data: {
            "project_name":         project_name,
            "title_roll":           title_roll,
            "project_email":        project_email,
            "project_number":       project_number,
            "project_description":  project_description,
            "project_source":       project_source,
            "project_socialMedia":  project_socialMedia,
            "project_humanTest":    project_humanTest,
            "activeDivs":           activeDivs  //add the array to your data
        },
        ...

请参阅此jsFiddle example - https://jsfiddle.net/kdghucwn/

Answer 3

我为每个元素添加了一个id：

DDMS

然后我只是设置一个数组，然后添加或删除所选的选项，如下所示：

<div id="project-scope-container">
    <div id="project-scope-title">PROJECT SCOPE</div>
    <div class="project-option-boxes" id="brandingAndIdentity">BRANDING & IDENTITY</div>
    <div class="project-option-boxes" id="webDesign">WEB DESIGN</div>
    <div class="project-option-boxes" id="responsive">RESPONSIVE/MOBILE</div>
    <div class="project-option-boxes" id="marketingAssets">MARKETING ASSETS</div>
    <div class="project-option-boxes" id="html5Animation">HTML5 ANIMATION</div>
    <div class="project-option-boxes" id="seoOptimization">SEO OPTIMIZATION</div>
    <div class="project-option-boxes" id="monthlySupport">MONTHLY SUPPORT</div>
    <div class="project-option-boxes" id="webDevelopment">WEB DEVELOPMENT</div>
    <div class="project-option-boxes" id="ecommerce">ECOMMERCE</div>
</div>

然后，只需将该变量添加到您的ajax数据中即可：

var selectedProjectOptions = [];

$('.project-option-boxes').click(function() {
    $(this).hide().toggleClass('box_focused').fadeIn('slow');

    //get the option's id
    var selectedOption = $(this).attr('id');
    //check to see if it's in the selectedProjectOptions array
    var optionIndex = selectedProjectOptions.indexOf(selectedOption);
    //If it has an index in the array already then it's being toggled off -- so we remove it.
    //If it isn't, we're adding to it.
    if(optionIndex > -1){
        selectedProjectOptions.splice(optionIndex, 1);
    } else {
        selectedProjectOptions.push(selectedOption);
    }
});

编辑：我为你做了一个小提琴，看看它是如何运作的https://jsfiddle.net/2xxnxrdL/

Answer 4

您可以用逗号分隔的字符串传递所有活动的div，以便在SQL的IN子句中应用为---

recyclerview

在ajax参数中传递活动或直接在SQL中使用它，如----

Var actives="";
$('.project-option-   boxes  .box_focused').each(function() { 
If (actives != "")
 avtives += ","+$(this).text();
Else
actives = $(this).text();
 });

如何通过ajax传递活动/切换类

4 个答案: